Question

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

我可以显示第一张图表＆＃34; blob＆＃34;，

但它并没有与＆＃34; blub＆＃34; !!

一起使用

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

＆＃13;

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++
}

＆＃13;

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

＆＃13;

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分配一个允许您区分它们的类，但更好的解决方案是使用嵌套选择，如上所述。

完整演示here。

有关选择如何工作的详细信息，请参阅this tutorial。

D3.js多线图

2 个答案: