使用selectAll()创建新元素同时保留现有元素 [英] Using selectAll() to create new elements while preserving existing elements

问题描述

我正在尝试完成一些d3教程，所以请忍受我的菜鸟问题.据我了解，为了创建某种类型的新元素，必须在不存在的元素上使用.selectAll()，然后使用.append()来创建它们.当不存在与指定选择器匹配的现有元素时，这种方法效果很好，但是如果存在，它将选择该/这些元素并在其中添加新元素.举个例子:

I'm trying to work through some d3 tutorials so please bear with my noob questions. As I understand it, in order to create new elements of a certain type, you have to use .selectAll() on the non-existing elements and then use .append() to create them. That works great when there are no existing elements matching the specified selector, but if there are, it will select that/those elements and append the new elements inside them. Take this example:

d3.json("virusOrigins.json", function(dataset) {
    var w = 200;
    var h = 300;
    var barPadding = 1;
    var xScale = d3.scale.linear()
                    .domain([0, d3.max(dataset, function(d) { return d.value; })])
                    .rangeRound([5, w])
                    .nice();

    var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h)

        // append base rectangle
        .append("rect")
        .attr("width", w)
        .attr("height", h)
        .attr("fill", "#ccc");
    svg.selectAll("rect.bars")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("y", function(d, i) {
            return i * (h / dataset.length);
        })
        .attr("x", 0)
        .attr("width", function (d) {
            return xScale(d.value);
        })
        .attr("height", function(d) {
            return (h / dataset.length) - barPadding;
        })
        .attr("fill", "#f33")
        .classed("bars", true);
});

这将产生以下HTML:

This results in the following HTML:

<svg width="200" height="300">
    <rect width="200" height="300" fill="#ccc">
        <rect y="0" x="0" width="13" height="32.333333333333336" fill="#f33" class="bars"></rect>
        <rect y="33.333333333333336" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
        <rect y="66.66666666666667" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
        <rect y="100" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
        <rect y="133.33333333333334" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
        <rect y="166.66666666666669" x="0" width="200" height="32.333333333333336" fill="#f33" class="bars"></rect>
        <rect y="200" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
        <rect y="233.33333333333334" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
        <rect y="266.6666666666667" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
    </rect>
</svg>

如何使动态创建的rect成为基本rect的兄弟?

How can I get the dynamically created rect's to be siblings of the base rect?

推荐答案

您要在svg中保存rect，然后将其追加.只需保存svg元素即可:

You're saving the rect in svg and then appending to it. Simply save the svg element instead:

var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

// append base rectangle
svg.append("rect")
    .attr("width", w)
    .attr("height", h)
    .attr("fill", "#ccc");
svg.selectAll("rect.bars")
    .data(dataset)
    .enter()
    .append("rect")
// etc

这篇关于使用selectAll()创建新元素同时保留现有元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！