Question

我的问题与this类似，但我需要绘制svg元素而不是创建列表。

我希望能够可视化嵌套数据，其中1-many对象充当容纳1到多个对象的容器。例如：

cars = [
        {
        type:
        parkingSpot:
        passengers = 
            [ {role: } ]
        }
]

我希望用户能够通过点击按钮添加汽车，并让一名乘客自动创建并具有驱动程序的角色。

我理解如何添加一辆新车，但我无法弄清楚如何在每辆车上出现一个司机。以下是我到目前为止的情况：

function addCar() {
    cars.push(new car(parkingSpot));
    svg.selectAll("car").data(cars).enter().append("rect")
        .attr("x", function(d) {
            return parkingSpot * 150;
        })
        .attr("y", 0)
        .attr("height", 300)
        .attr("width", 100)
        .attr("fill", "red")
        .attr("class", "car")

    svg.selectAll("passenger").data(???????).enter()
        .append("circle")
                .attr( ... )
                .attr("class", "passenger");

parkingSpot++;
}

我所尝试的任何一项都不起作用，或最终为每辆制造的汽车堆叠一组新的乘客圈。

我希望以后可以回去增加更多乘客，在这种情况下，老乘客可能需要四处走动。

jsFiddle：http://jsfiddle.net/N5DMe/10/（似乎不起作用，可能是我的浏览器）

codepen：http://codepen.io/anon/pen/IegGb（确实有用）

Answer 1

正如Lars所说，

.data(cars)

每次调用addCar函数时，

都会在每辆汽车中绘制一个新的圆圈。

我发现使用：

.data(cars[cars.length - 1].passengers)

只选择最新的汽车，我只能绘制最新的圆圈。

如何使用嵌套数据更新d3.js svg

1 个答案: