d3从svg元素中选择数据

Question

在选择我的d3代码中的g元素时遇到问题，无法解决如何做到这一点。

代码

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")

如果它在生成g元素时未包装在forEach函数中，则该方法可以工作。

我试着在属性中分配一个类，并以这种方式按所有g元素进行选择。

还尝试给svg元素一个ID，并以这种方式选择它，但没有成功

Answer 1

不使用循环(如forEach )在D3代码中追加元素。

当然，我们使用循环(for循环，for...in循环，forEach循环等等)一直在D3代码中，因为D3是JavaScript.但是我们不使用循环来附加元素，这不是惯用的方式。最后，我们使用循环来追加元素，但在非常特殊和罕见的情况下。

使用循环在D3代码中追加元素不仅很尴尬，而且有时它会使您陷入一种没有(简单)解决方案的境地。就像这张。

在您的例子中，惯用的方法是嵌套enter selections。

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

下面是一个非常基本的示例，使用<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个元素。