如何使用enter（），exit（）和水平“堆叠”图表

问题描述

我有一个伪堆叠，水平图表。我看到伪，因为它模仿一个堆积图，但不是真正多个堆叠的值，而是3个不同的值，总计100％。我不知道这种图表的名称。

I have a pseudo-stacked, horizontal chart. I saw pseudo because it mimics a stacked chart but is not really multiple stacked values, but rather 3 different values that add up to a total of 100%. I'm not sure what the name of this kind of chart is.

无论如何，我想弄清楚如何获得进入（）和 exit（）并更新为图表工作。我有这个jsfiddle作为例子

Anyways, I'm trying to figure out how to get the enter() and exit() and updating to work for the chart when the data changes. I have this jsfiddle as an example

svg结构如下所示：

The svg structure starts like this:

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

数据更改后，它如下所示：

And after the data changes, it looks like this:

<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 将被重新创建，而旧的那些不被删除。这里有两个问题：

The rects and texts are getting created again, and the old ones are not being removed. There are two problems here:

1. 正在复制 rect 因为某些原因。我不知道为什么 exit（）不能为他们工作。

1. The rects are being duplicated for some reason. I'm not sure why the exit() isn't working for them.

code> text 正在重复，因为我有 text.exit（）。remove（）目前已注释掉，但取消注释

The texts are being duplicated because I have text.exit().remove() commented out at the moment, but uncommenting it results in an error for some reason.

使用输入，更新和退出函数的正确方法当你创建一个图表，然后更新他们的数据？我一直在跟踪许多在线示例，并认为我使用正确的语法，但它不能正常工作。

What the proper way to use the enter, update and exit functions for when you create a chart and then later update the data for them? I have been following many online examples and thought I was using the correct syntax but it's not working properly obviously.

推荐答案

您看到的问题是您拥有 g中分配的文本和 rect 元素元素。您只需为 g 元素处理输入，更新和退出选择。一切都挂起了。这意味着您需要保存 g 元素的输入选择，然后将其他元素附加到该元素。

The source of the issues you're seeing is that you have your text and rect elements grouped in g elements. You need to handle enter, update and exit selections only for the g elements. Everything else hangs off of that. This implies that you need to save the enter selection for the g elements and then append the other elements to that.

结构看起来像这样：

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

对于更新选择：

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

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

For the exit selection, you just need to remove the g elements because that will also remove everything contained within them:

 bar.exit().remove();

完成演示。

这篇关于如何使用enter（），exit（）和水平“堆叠”图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！