D3.js 多折线图

Question

我尝试使用 D3.js、

显示我的两个折线图

我可以显示第一个图表"blob",

但它不适用于 "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 d.x})
    .y (function(d){return d.y});
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()，而是直接将路径标签附加到对我有用的 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 中几乎不需要），但可以使用 nested selections:

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

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

完成演示 here。

有关选择工作原理的更多详细信息，请参阅 this tutorial。

D3.js 多折线图

D3.js Multiple Line Chart

javascript

linechart

d3.js