Question

我正致力于使用SVG渲染模型。我将尝试提供一个比我工作更清晰的例子。我们假设数据结构是JSON对象，如下所示：

vehicle = {
    "axles": [
        {
            "id": 0,
            "wheels": [
                {
                    "id": 0,
                    "diameter": 18
                },
                {
                    "id": 1,
                    "diameter": 18
                }
            ]
        },
        {
            "id": 1,
            "wheels": [
                {
                    "id": 0,
                    "diameter": 18
                },
                {
                    "id": 1,
                    "diameter": 18
                }
            ]
        }
    ]
}

我想为车辆，每个车轴和车轴上的每个车轮渲染一些形状。我可以成功地为车辆和车轴绘制一个形状，但不是车轮。

（我将忽略大多数样式/大小属性）

var svg = d3.select("body").append("svg");
svg.append("rect").attr("class", "car") // Only 1 car object
svg.selectAll(".car).data(vehicle.axles, function(d){return d.id}) // Render each axle
  .append("rect")

我想要＆＃34;画轮子＆＃34;关于轴的位置，但在追加语句的末尾应用data（）会将轴的内部放置，而不显示它 - 我需要轮子的元素是在父母和轴之间，但是我需要在数据结构中读取轴的子数据。

我希望这有任何意义，有人可以提供帮助。

Answer 1

您不能在矩形内放置矩形，但可以将组g放在另一个组中。制造＆＃34;汽车＆＃34;是有道理的。一个组，其中包含每个＆＃34;轴＆＃34;的组，每个组包含一对＆＃34;轮＆＃34; （也可以是rects或组）。

除了链接所有表达式，您还可以为变量分配选择并重复使用它，或者通过选择器重新选择selectAll元素（如果您绑定的数据不是＆＃ 39; t取决于前面的上下文。）您还可以使用each()并使用d3.select(this)为选择中的每个元素重复代码以引用父元素。

这是一个例子。你可以附加＆＃34; car＆＃34;作为一个组（并且您可以包含任意数量的元素，包括rect）：

svg.append("g").attr("class", "car") // this group is the car
   .append("rect")  // a rect inside the car group
   ...

然后你预先选择＆＃34;轴＆＃34;你要在＆＃34; car＆＃34;内创建的物品。组：

svg.select(".car") // selects the group car (where we will append axles)
   .selectAll(".axle") // pre-select all axles
   .data(vehicle.axles)  // bind the data
   .enter()
   .append("g").attr("class", "axle") // will append new axle for each data item
      .each(function(d,i) {  // now repeat for each axle
          d3.select(this)  // selects the current axle
            .selectAll(".wheel")  // pre-select the wheels you are going to create
            .data(d.wheels) // bind the data
            .enter()
            .append("g").attr("class", "wheel") // append a wheel for the current axle
            .append("rect") // the rect representing the wheel
            ...
       })
       .append("rect") // the rect representing the axle

使用此JSFiddle尝试一下。我将rects替换为text并略微修改了JSON数据以说明解决方案。

如何将对象相对于另一个

1 个答案: