d3从svg元素中选择数据

在选择我的d3代码中的g元素时遇到问题，无法弄清楚如何执行此操作。d3从svg元素中选择数据

守则

var vis = d3.select("#custom-view").append('svg:svg').attr('width', w).attr('height', h); 

d3.range(lengthJson).forEach(function (t) { 
     vis.append("g") 
     .attr('width', wBlob) 
     .attr('height', hBlob); 

      return t 

}); 

var blobs = **tried numerous things here**.selectAll('g').data(graph.nodes) 
     .enter() 
     .append('rect') 
     (....do a lot more code...)

的问题

以上描绘的代码添加元素到根据JSON文件的长度的元件。然后，我希望它将元素附加到该元素中的每个元素。

事情我试图

试图声明它的可变

var gCode = vis.append("g")

使得克元件

我试图时，如果它不裹在foreach函数其中工程在属性中分配一个类并按照所有的g元素选择。

还试图给SVG元素的ID，并选择它的方式，但没有运气

来源

2017-08-01 Suliman Sharif

不要使用循环，如forEach，追加在D3代码元素。

当然，我们使用的循环（循环for，for...in循环，forEach循环等）在D3代码的时候，因为D3是JavaScript的...但我们不使用循环追加要素，这不是惯用的方式。最终我们使用循环来追加元素，但是在非常特殊和罕见的情况下。

使用循环在D3代码中添加元素不仅很尴尬，但有时它会让你处于没有（简单）解决方案的情况。像这个。

您的案例中的惯用方式是嵌套输入选择。

因此，根据数据集的长度使用输入选择来追加组，然后使用内部输入选择来追加矩形或任何您想要的元素。

这里是一个非常基本的例子，使用<div> S和<tspan> S：

var data = ["foo", "bar", "baz"]; 
 
var body = d3.select("body"); 
 
var colors = d3.scaleOrdinal(d3.schemeCategory10) 
 
var divs = body.selectAll(null) 
 
    .data(d3.range(data.length)) 
 
    .enter() 
 
    .append("div") 
 
    .style("background-color", function(d) { 
 
    return colors(d) 
 
    }); 
 
var texts = divs.selectAll(null) 
 
    .data(data) 
 
    .enter() 
 
    .append("tspan") 
 
    .text(function(d) { 
 
    return d + " " 
 
    })

<script src="https://d3js.org/d3.v4.min.js"></script>

在上面的演示中，data阵列具有3个元素。因此，第一个（或外部）输入选择将在主体中追加3个div。

然后，第二个（内部）选择将为每个div附加数据数组中的3个元素。

来源

2017-08-01 14:20:50

d3从svg元素中选择数据

回答

相关问题