文章/答案/技术大牛

发布

社区首页 >问答首页 >如何根据数据添加带有D3 append()函数的可变节点数

问如何根据数据添加带有D3 append()函数的可变节点数
EN

Stack Overflow用户

提问于 2014-02-06 12:10:10

回答 1查看 587关注 0票数 0

为了说明这个问题，让我们以下面的简单数据示例为例，其中我要显示一个对象列表。每个对象都由一个形状和一个可变的行列表组成。

var data = [
    {
        "shape": "circle",
        "x": 10,
        "y": 20,
        "lines": [
            {x1: "-10", y1: "-10", x2: "10", y2: "10"}
        ]
    },
    {
        "shape": "rect",
        "x": 30,
        "y": 20,
        "lines": [
            {x1: "-10", y1: "-10", x2: "10", y2: "10"}
        ]
    },
    {
        "shape": "circle",
        "x": 50,
        "y": 20,
        "lines": [
            {x1: "-10", y1: "-10", x2: "10", y2: "10"},
            {x1: "-10", y1: "10", x2: "10", y2: "-10"}
        ]
    },
    {
        "shape": "rect",
        "x": 70,
        "y": 20,
        "lines": [
            {x1: "-10", y1: "-10", x2: "10", y2: "10"},
            {x1: "-10", y1: "10", x2: "10", y2: "-10"}
        ]
    }
];

我知道我可以使用filter()函数来区分形状，这样我就可以创建如下所示的形状：

var shapes = svg.selectAll(".shape")
        .data(data)
        .enter()
        .append("g")
        .attr("transform", function (d) {
            return "translate(" + d.x + "," + d.y + ")";
        });

var circles = shapes.filter(function (d) {
    return d.shape == "circle"
})
        .append("circle")
        .attr("r", 10);

var rect = shapes.filter(function (d) {
    return d.shape == "rect"
})
        .append("rect")
        .attr("transform", "translate(-5, -5)")
        .attr("width", 10)
        .attr("height", 10);

因此，我的问题是根据数据添加可变的行数。

我知道我怎么可能只发生这样的第一行：

shapes.append("line")
        .attr("stroke", "red")
        .attr("x1", function (d) {
            return d.lines[0].x1
        })
        .attr("y1", function (d) {
            return d.lines[0].y1
        })
        .attr("x2", function (d) {
            return d.lines[0].x2
        })
        .attr("y2", function (d) {
            return d.lines[0].y2
        })

但是，如果行数是可变的，我就不知道该如何做。

实现这一目标的正确方法是什么？

我在这里用这个例子创建了一个小提琴：http://jsfiddle.net/Lm8XB/1/

javascript

svg

d3.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-02-06 12:16:31

正确的方法是使用嵌套选择。也就是说，再次将行数据绑定到line元素，引用先前绑定的数据：

shapes.selectAll("line").data(function(d) { return d.lines; })
      .enter().append("line")

然后，在设置参数时可以直接引用坐标：

.attr("x1", function (d) {
            return d.x1
        })
        .attr("y1", function (d) {
            return d.y1
        })
        .attr("x2", function (d) {
            return d.x2
        })
        .attr("y2", function (d) {
            return d.y2
        })

完整的示例这里。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21602597

复制

相似问题

问如何根据数据添加带有D3 append()函数的可变节点数
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何根据数据添加带有D3 append()函数的可变节点数EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何根据数据添加带有D3 append()函数的可变节点数
EN