Question

我有一个伪堆叠的水平图表。我看到伪是因为它模仿堆积图表，但实际上不是多个堆叠值，而是3个不同的值，总计100％。我不确定这种图表的名称是什么。

无论如何，我试图找出如何获取enter()和exit()并在数据发生变化时更新为图表工作。我有这个jsfiddle作为例子

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>

再次创建rects和texts，并且不删除旧的rect和exit()。这里有两个问题：

由于某种原因，text被复制了。我不确定为什么text.exit().remove()不适合他们。
{{1}}正在重复，因为我此时已{{1}}注释掉，但取消注释会因某种原因导致错误。

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

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。

如何使用enter（），exit（）并使用水平＆＃34;堆叠＆＃34;进行更新图表

1 个答案: