javascript - 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 代码中附加元素。

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

在 D3 代码中使用循环附加元素不仅很尴尬，而且有时它会让您陷入没有(简单)解决方案的情况。就像这个一样。

在您的情况下，惯用的方法是嵌套输入选择。

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

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