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

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类中斑马的任何一个圆都是"斑马圆".