如何將數據的子選擇傳遞給子節點？

如果我有嵌套數組這樣如何將數據的子選擇傳遞給子節點？

var ar = [[[1,0],[2,0],[3,0]], [[1,0],[2,0],[3,0]]]

我要創建兩個SVG元素，這很容易

var svg = d3.select('div.main`) 
    .selectAll('svg') 
    .data(ar) 
    .enter() 
    .append('svg')

現在我要綁定子陣SVG的選擇，這樣的事情

var g = svg.selectAll('g') 
    .data(function(d,i) {return d[i];}) 
    .enter() 
    .append('g')

之後，附加到g的數據應該是

[[1,0],[2,0],[3,0]]

我知道這行就是不正確.data(function(d,i) {return d[i];})只是不知道該如何解釋不同的方式。

來源

2017-07-14 Raf

如果我理解正確的問題，

你是正確的，問題從識別的線出現。你不需要爲數據返回d[i]了新的選擇，d代表與各相關svg每一個人數據，d[i]僅代表每個數據的一個組成部分。

如果你想每個數據，在其全部，只是追加股份公司正常：

var g = svg.append("g");

嘗試在g.data()console.log，您將看到您的數據還有，只要你想，它必然給每個g。

然後，您可以使用綁定到每個g並從每個svg作爲數據創建新功能的這些數據中的每個數據。傳遞數據如下：.data(function(d) { return d; })。下面的代碼片段應該幫助把它放在一起：

var data = [[[10,10],[30,30],[50,50]], [[10,20],[80,30],[50,60]] ]; 
 

 
var svg = d3.select('body') 
 
    .selectAll('svg') 
 
    .data(data) 
 
    .enter() 
 
    .append('svg') 
 
    .attr("height",100) 
 
    .attr("width",200); 
 
    
 
var g = svg.append("g"); 
 

 
console.log("Data Bound To First G in First SVG:") 
 
console.log(g.data()[0]); 
 
console.log("Data Bound To Second G in Second SVG:") 
 
console.log(g.data()[1]); 
 

 
// Data is now available to make features: 
 
g.selectAll("circle") 
 
    .data(function(d) { return d; }) 
 
    .enter() 
 
    .append("circle") 
 
    .attr("r",10) 
 
    .attr("cx",function(d) { return d[0] }) 
 
    .attr("cy",function(d) { return d[1] });

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

來源

2017-07-14 20:07:58

如何將數據的子選擇傳遞給子節點？

回答

相關問題