Question

我使用以下代码在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 + ")";
        });

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

Answer 1

这是我从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类中斑马的任何一个圆都是“斑马圈”。

d3.js在彼此之上创建对象

1 个答案: