D3.js多線圖

Question

我試着用D3.js顯示我的兩個圖，

我可以顯示第一圖「斑點」，

不過，這並不與「咕嚕咕嚕」的工作！

我該如何解決這個問題，以及如何簡化for循環？

var canvas=d3.select("body") 
 
\t .append("svg") 
 
\t .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) { 
 
\t 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

首先，你不需要一個循環這裏（你幾乎從來沒有在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以瞭解有關選擇如何工作的更多詳細信息。

Answer 2

代替使用數據（）和輸入（）中，i直接所附的路徑標籤，其爲我工作克標籤。

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