javascript - 如何使用 Enter()、exit() 和更新水平 "stacked"图表

Question

我有一个伪堆叠水平图表。我之所以看到pseudo，是因为它模仿了堆叠图表，但实际上并不是多个堆叠值，而是 3 个不同的值，总和为 100%。我不确定这种图表的名称是什么。

无论如何，我正在尝试弄清楚如何获取 enter() 和 exit() 并在数据更改时更新以适用于图表。我以这个 jsfiddle 为例

http://jsfiddle.net/Uhrgt/

svg 结构如下所示:

<svg class="chart" width="756" height="50">
    <g transform="translate(0,0)" width="73.6">
        <rect height="50" width="224" style="fill: rgb(0, 0, 255);"></rect>
        <text x="113" y="25" dy=".35em">30%</text>
    </g>
    <g transform="translate(75,0)" width="451">
        <rect height="50" width="451" style="fill: rgb(255, 0, 0);"></rect>
        <text x="226" y="25" dy=".35em">60%</text>
    </g>
    <g transform="translate(529.2000122070312,0)" width="224.8">
        <rect height="50" width="73" style="fill: rgb(128, 0, 128);"></rect>
        <text x="37" y="25" dy=".35em">10%</text>
    </g>
</svg>

数据改变后，如下所示:

<svg class="chart" width="756" height="50">
    <g transform="translate(0,0)" width="73.6">
        <rect height="50" width="224" style="fill: rgb(0, 0, 255);"></rect>
        <text x="113" y="25" dy=".35em">30%</text>
        <rect height="50" width="73" style="fill: rgb(0, 0, 255);"></rect>
        <text x="37" y="25" dy=".35em">10%</text>
    </g>
    <g transform="translate(75,0)" width="451">
        <rect height="50" width="451" style="fill: rgb(255, 0, 0);"></rect>
        <text x="226" y="25" dy=".35em">60%</text>
        <rect height="50" width="451" style="fill: rgb(255, 0, 0);"></rect>
        <text x="226" y="25" dy=".35em">60%</text>
    </g>
    <g transform="translate(529,0)" width="224.8">
        <rect height="50" width="73" style="fill: rgb(128, 0, 128);"></rect>
        <text x="37" y="25" dy=".35em">10%</text>
        <rect height="50" width="224" style="fill: rgb(128, 0, 128);"></rect>
        <text x="113" y="25" dy=".35em">30%</text>
    </g>
</svg>

将再次创建矩形和文本，并且旧的不会被删除。这里有两个问题:

1. 由于某种原因，矩形被重复。我不确定为什么 exit() 对他们不起作用。

2. text 正在重复，因为我目前已注释掉 text.exit().remove()，但取消注释会导致由于某种原因出现错误。

当您创建图表然后更新它们的数据时，使用输入、更新和退出功能的正确方法是什么？我一直在关注许多在线示例，并认为我使用了正确的语法，但它显然无法正常工作。

Answer 1

您所看到问题的根源在于您将 text 和 rect 元素分组在 g 元素中。您只需要处理 g 元素的输入、更新和退出选择。其他一切都取决于此。这意味着您需要保存 g 元素的输入选择，然后将其他元素附加到该元素。

结构如下:

 var barEnter = bar.enter().append('g');
 barEnter.append("rect");
 barEnter.append("text");

对于更新选择:

 bar.transition()...
 bar.select("rect").transition()...
 bar.select("text").transition()...

对于退出选择，您只需删除 g 元素，因为这也会删除其中包含的所有内容:

 bar.exit().remove();

完整演示 here .