javascript - 如何相对于另一个对象定位一个对象

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")

然后我想相对于轴的位置“绘制轮子”，但是在附加语句的末尾应用 data() 会将轴元素放入内部，使其不显示 - 我需要wheel 的元素与 axle 的 一起在父元素中，但我需要在数据结构中读取 axle 的子数据。

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

Answer 1

您不能将矩形放在矩形内，但可以将组 g 放在另一个组内。使“汽车”成为一个组是有意义的，每个“轴”都包含一个组，每个“轴”包含一对“轮子”(可以是 rects，也可以是组)。

除了链接所有表达式，您还可以将选择分配给变量并重用它，或者通过选择器选择selectAll元素(如果数据是绑定(bind)不依赖于先前的上下文。)您还可以使用 each() 并使用 d3.select(this) 为选择中的每个元素重复代码以引用到父元素。

这是一个例子。您可以将“汽车”作为一个组附加(您可以在其中包含任意数量的元素，包括 rect):

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

然后您预先选择要在“汽车”组中创建的“车轴”对象:

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 数据以说明解决方案。