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文件的大小，我想知道是否生成了第一个元素对应于容器1然后依此类推的g元素。

我尝试过的事情

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

Answer 1

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

首先，＆＃34;我想知道是否产生了g元素，第一个元素对应于容器1＆＃34;

使用d3输入数据时，项目按提供的顺序附加 - 因此创建的第一个元素具有绑定到它的数据数组中第一个项目的数据。如果您的数据已按顺序排列，则它们将按顺序附加。

如果您要添加<g>的选择中已存在<rect>个元素，则数据集中的第一个项目将绑定到第一个<rect> <g> 1}}在选择中。

其次（如果我正确地阅读了您的问题），如果您尝试使用相同的数据在每个<rect>中创建<g>，那么为什么不为每个项目添加<g>在数据集中，然后，使用绑定到每个<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>

可以很容易地完成：

＆＃13;

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; });

＆＃13;

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

＆＃13;

这种方法将json中的数据链接（绑定）到g，这可以很容易地用于在每个g中创建新的子元素，这些元素基于您的标题和目标，看起来像你的目标是什么。

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

1 个答案: