0

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

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：

<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>

如何让动态创建的矩形成为基本矩形的兄弟姐妹？

4

2 回答 2

2

您正在保存rectinsvg然后附加到它。只需保存svg元素：

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
于 2013-11-14T19:33:56.533 回答
1

更改数据插入如下：

svg.selectAll("rect.bars")
   .data(dataset, function(d){return d;}) <-- Here *
   .enter()
   .append("rect")
   ...
  • 添加该函数以告知您要考虑所有数据，而不是针对现有元素，而是要真正生成新元素。

有关详细信息，请参阅本文的示例 3，了解 D3.js 中的 selectAll、data、enter、append 序列。

于 2013-11-14T19:32:28.207 回答