如何将数据的子选择传递给子节点？

如果我有嵌套数组这样如何将数据的子选择传递给子节点？

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

如何将数据的子选择传递给子节点？

回答

相关问题