D3.js多折线图

Question

我尝试使用D3.js显示两个折线图，

我可以显示第一个图表“斑点”，

但这不适用于“ blub”！

我该如何修复它以及如何简化for循环？

 var canvas=d3.select("body") .append("svg") .attr("width",500).attr("height",300); var donnees= { blob:[ {x:10,y:20},{x:20,y:60}, {x:30,y:70}, {x:40,y:202},{x:50,y:260}, {x:60,y:70}, {x:70,y:75},{x:80,y:70}, {x:90,y:0} ], blub:[ {x:100,y:20},{x:110,y:20},{x:120,y:60}, {x:130,y:70}, {x:140,y:32},{x:150,y:60}, {x:160,y:90}, {x:170,y:75},{x:180,y:100}, {x:190,y:20} ] }; var groupe= canvas.append("g") .attr("transform", "translate(20,20)"); var line= d3.svg.line() .x (function(d){return dx}) .y (function(d){return dy}); var colors = d3.scale.category20(); var index = 0; for (var i in donnees) { groupe.selectAll("path") .data([donnees[i]]) .enter() .append("path") .attr("d",line) .attr("fill", "none") .attr("stroke", colors(index)) .attr("stroke-width","1"); index++ } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 

Answer 1

我没有使用data（）和enter（），而是直接将path标签附加到对我有用的g标签上。

            var canvas=d3.select("body")
    .append("svg")
    .attr("width",500).attr("height",300);

var donnees= {
    blob:[
      {x:10,y:20},{x:20,y:60}, {x:30,y:70},
      {x:40,y:202},{x:50,y:260}, {x:60,y:70},
      {x:70,y:75},{x:80,y:70}, {x:90,y:0}
    ],
    blub:[
      {x:100,y:20},{x:110,y:20},{x:120,y:60}, {x:130,y:70},
      {x:140,y:32},{x:150,y:60}, {x:160,y:90},
      {x:170,y:75},{x:180,y:100}, {x:190,y:20}
    ]
};


var groupe= canvas.append("g")
    .attr("transform", "translate(20,20)");
var line= d3.svg.line()
    .x (function(d){ return d.x})
    .y (function(d){return d.y});
var colors = d3.scale.category20();

var index = 0;
for (var i in donnees) {
    groupe
    .append("path")
    .attr("d", line(donnees[i]))
    .attr("fill", "none")
    .attr("stroke", colors(index))
    .attr("stroke-width", 1);

index++
}

Answer 2

首先，这里不需要循环（在D3中几乎从未使用过循环），但是可以使用嵌套选择 ：

groupe.selectAll("g")
  .data(d3.values(donnees))
  .enter()
  .append("g")
  .selectAll("path")
  .data(function(d) { return [d]; })
  .enter()
  .append("path")
  ...

您具体看到的问题是因为您正在选择path元素，在循环的第一次迭代之后， path元素将已经存在。 也就是说，您在.data()提供的数据与现有path元素匹配，因此.enter()选择为空，不添加任何内容。 您可以解决此问题，例如，通过为每个path分配一个类来区分它们，但是更好的解决方案是使用如上所述的嵌套选择。

在此处完成演示。

有关选择如何工作的更多详细信息，请参见本教程 。