How to use enter(), exit() and update with horizon

Question

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.

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

http://jsfiddle.net/Uhrgt/

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>

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

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

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

Answer 1

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.

The structure would look like this:

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

For the update selection:

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

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

 bar.exit().remove();

Complete demo here.