1

我正在尝试做一个多系列折线图，就像这里的例子http://bl.ocks.org/mbostock/3884955

唯一的区别是我试图在两组数据之间进行转换。过渡效果非常好，但我不知道如何开始让系列标签与每一行对齐，就像该示例中的情况一样。

有没有人对如何去做有任何想法？我的代码的设置方式与上面的示例略有不同，因此我无法严格遵循它。但即使我这样做，数据标签也不会通过......

这是我的代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>    
body {
  font: 10px serif;
}    
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
    fill: none;
  stroke: #000;
  shape-rendering: crispEdges;

}
    .line {
  fill: none;
  stroke-width: 1.5px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>

var width = 550;
            var height = 600;
            var padding=60;

var parseDate = d3.time.format("%Y").parse;
var x = d3.time.scale().range([padding, width-padding]);
var y = d3.scale.linear().range([height-padding, padding]);        

var z = d3.scale.category10();

var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left");

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height)


//load CSV
d3.csv("diverge-nonscaled1950.csv", function(error, data) {

    data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.India=+d.India;
    d.China=+d.China;
      });


  //compute column names
var seriesNames = d3.keys(data[0]).filter(function(d) { return d !== "date"; })
      .sort();

 //this is dataset one: data is scaled to column name INdia
      var series = seriesNames.map(function(series) {
    return data.map(function(d) {
      return {x: d.date, y: ((+d[series]/d.India)*100)};
    });

  });

 //this is dataset two: data is scaled to column name China
      var series1 = seriesNames.map(function(series1) {
    return data.map(function(d) {
      return {x: d.date, y: ((+d[series1]/d.China)*100)};
    });

  });


var line = d3.svg.line()
    .interpolate("basis")
   // .defined(function(d) { return d.country>0; })
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });   


//domains
x.domain(d3.extent(data, function(d) { return d.date; }));
 y.domain([0,2300]);
 z.domain(seriesNames)


//axes
  svg.append("g")
      .attr("class", "x axis")
.attr("transform", "translate(0," + (height-padding) + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + padding + ",0)")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("x",0-(height/2.5))
      .attr("y", -50)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .style("font-size",11)
      .text("Relative per Capita Incomes");;

//draw path
svg.selectAll(".line")
    .data(series)
  .enter().append("path")
    .attr("class", "line")
    .attr("d", line)
    .attr("stroke",function(d, i) { return z(i); })

 //first transition from dataset one to two   
d3.select("svg")
               .on("click",file1);

function file1(){
svg.selectAll(".line").data(series1)
    .transition().duration(750)
    .attr("d", line)
    .attr("stroke",function(d, i) { return z(i); })

d3.select("svg")
               .on("click",file2);

  }

 //second transition back to one
function file2(){
svg.selectAll(".line").data(series)
    .transition().duration(750)
    .attr("d", line)
    .attr("stroke",function(d, i) { return z(i); })

d3.select("svg")
               .on("click",file1);


} 



});

</script>
</body>

非常感谢您的任何帮助... Avin

4

1 回答 1

1

不久前我也遇到了麻烦。与您发布的示例一样，您必须使用 d3 的selection.datum()方法，该方法为单个元素获取数据。然后，您将选择每个系列中的最终数据点，thing[thing.length - 1]并使用该点的 x 和 y 值对文本执行转换/翻译。代码的相关部分是：

 city.append("text")
  .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
  .attr("transform", function(d) { 
      return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")";
  })

然后动画只是更新转换的问题，例如：

city.selectAll('text').transition()
    .attr("transform", function(d) { 
        return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; 
    })

您还可以查看我不久前制作的图表，该图表似乎与您正在尝试做的事情相似。

于 2013-03-05T13:04:39.417 回答