5

我使用以下代码在我的 SVG 元素中创建矩形：

    var rectangles = svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect");

    rectangles.attr("x", function (d) {
            return xScale(getDate(d));
            //return xScale(d.start);
        })
        .attr("y", function (d, i) {
            return (i * 33);
        })
        .attr("height", 30)
        .transition()
        .duration(1000)
        .attr("width", function (d) {
            return d.length;
        })
        .attr("rx", 5)
        .attr("ry", 5)
        .attr("class", "rectangle")
        .attr("onclick", function (d) {
            return "runaction(" + d.start + ")";
        });

如何在以前的矩形之上创建新的矩形？

4

1 回答 1

7

这是我从 Scott Murray 那里得到的这个问题的答案，他是 d3.js http://alignedleft.com/tutorials/d3/的优秀入门教程的作者，这对我理解它的功能有很大帮助。我希望他不会介意我把他的答案放在这里是为了每个人的利益。

非常感谢斯科特！

是的，这绝对是可能的。以您的示例为例，假设您要绘制一组圆圈，并将名为“giraffeData”的数据集绑定到它们。你会使用：

svg.selectAll("circle")
    .data(giraffeData)
    .enter()
    .append("circle");

但是你有第二个数据集（实际上只是一个值数组），称为“zebraData”。因此，您可以使用相同的代码，但在此处更改您引用的数据集：

svg.selectAll("circle")
    .data(zebraData)
    .enter()
    .append("circle");

当然，这会无意中选择您已经创建的所有圆圈并将新数据绑定到它们——这并不是您真正想要的。所以你必须帮助 D3 区分长颈鹿圈和斑马圈。您可以通过为它们分配类来做到这一点：

svg.selectAll("circle.giraffe")
    .data(giraffeData)
    .enter()
    .append("circle")
    .attr("class", "giraffe");

svg.selectAll("circle.zebra")
    .data(zebraData)
    .enter()
    .append("circle")
    .attr("class", "zebra");

或者，您可以将每种类型的圆圈分组到一个单独的 SVG 'g' 元素中：

var giraffes = svg.append("g")
                .attr("class", "giraffe");

giraffes.selectAll("circle")
    .data(giraffeData)
    .enter()
    .append("circle");

var zebras = svg.append("g")
                .attr("class", "zebra");

zebras.selectAll("circle")
    .data(zebraData)
    .enter()
    .append("circle");

我可能会选择后者，因为这样你的 DOM 组织得更干净，而且你不必为每个圈子添加一个类。您可能只知道 g 内带有斑马类的任何圆圈都是“斑马圈”。

于 2013-08-27T09:14:17.200 回答