javascript - 将 JSON 数据链接到 d3 中的 g 元素

Question

所以我被 d3 中的一个问题困住了。我有这个 JSON 文件

{
  "nodes": [
    {"container": "Container 1", "x" : 0, "y" : 0, "px" : 0, "py": 0, "col" : 1, "row" : 0, "height" : 100, "width" : 100},
    {"container": "Container 2", "x" : 100, "y" : 0, "px" : 0, "py": 0, "col" : 1, "row" : 0, "height" : 100, "width" : 100}]
}

我让元素对应于 JSON 中节点的长度。在每个元素内，将有一个元素对应于容器 1 的上述数据，依此类推，另一个元素对应于容器 2。

我想要的文件框架是:

<svg>
    <g>
       <rect>Container 1</rect>
    </g>
    <g>
       <rect>Container 2></rect>
    </g>
</svg>

我迷路的地方是这个

gCode.append("rect").data(graph.nodes)
            .enter()
            .attr('class', 'blob')
            .style("border", "20px solid")

因为我不知道 JSON 文件的大小，而且我想知道在生成 g 元素时第一个元素是否对应于容器 1，然后依此类推。

我尝试过的事情

我正在实现一个 forEach 函数，但有人建议我不要这样做，因为它会在以后出现问题，我怀疑这里可能是同样的情况。

Answer 1

这里发生了一些事情，我可能误解了这个问题(我查看了您之前的 question 以更好地理解上下文)。

首先，“我想知道在生成 g 元素时，第一个元素是否对应于容器 1”

当使用 d3 输入数据时，项目按照提供的顺序附加 - 因此创建的第一个元素绑定(bind)了数据数组中第一个项目的数据。如果您的数据已经有序，则它们将按顺序追加。

如果您的 <g>您要附加的选择中已存在元素 <rect> s 到，则数据集中的第一项将绑定(bind)到 <rect>在第一个<g>在选择中。

其次(如果我没看错你的问题)，如果你想创建一个 <rect>在每个<g>使用相同的数据 - 那么为什么不附加一个 <g>对于数据集中的每个项目，然后使用绑定(bind)到每个 <g> 的数据, 附加一个 <rect>每个 <g> .这会给你一个你想要的结构:

<svg>
  <g>
     <rect class="Container1" x="0" y="0" width="100" height="100"></rect>
  </g>
  <g>
      <rect class="Container2" x="100" y="100" width="100" height="100"></rect>
  </g>
</svg>

而且可以很容易地完成:

var data = {
"nodes": [
  {"container": "Container1", "x" : 0, "y" : 0, "px" : 0, "py": 0, "col" : 1, "row" : 0, "height" : 100, "width" : 100},
  {"container": "Container2", "x" : 100, "y" : 100, "px" : 0, "py": 0, "col" : 1, "row" : 0, "height" : 100, "width" : 100}]
}

var svg = d3.select("body")
  .append("svg")
  .attr("width",400)
  .attr("height",300);
  
// Append one <g> for each item in the data array:  
var g = svg.selectAll("g")
  .data(data.nodes)
  .enter()
  .append("g");
  
// Append a rectangle to each <g> based on the data bound to that <g>:  
g.append("rect")
  .attr("x", function(d) { return d.x; })
  .attr("y", function(d) { return d.y; })
  .attr("width",function(d) { return d.width; })
  .attr("height",function(d) { return d.height; })
  .attr("class", function(d) { return d.container; });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

这种方法将 json 中的数据链接(绑定(bind))到 g , 这很容易用于在每个 g 中创建新的子元素，根据您的头衔和目标，这似乎是您的目标。