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个元素。

d3从svg元素中选择数据

1 个答案: