problem with enter, exit usage about d3

[mbostock]

Well, assuming you're using version 0.30.+, your code looks like it should work to me, so I'd need to see the full example (say, as a gist) to further assist debugging. I got your code working with some basic constants:

w = 960,
h = 500,
p = 20,
data = [[{y:0},{y:1}],[{y:0},{y:1}]],
color = d3.scale.category20(),
n = data.length;

I wouldn't recommend using the sum of y-values as your key function for the data join. If you don't have a meaningful identifier, I would stick with the default which is to use the index. And besides, you don't need a join unless you'll be changing the data after the initial render and want to do some animation.

To explain a bit about what the code is doing…

vis.selectAll("g.layer") will select all g elements with the class attribute "layer", within your previously-added svg:svg element (vis).

This selection is empty, since you just added the SVG container. So, you create the child g elements by binding them to your data, and then calling enter(). The enter selection should not be an array of nulls, but an array of objects; these are basically placeholder nodes, saying where to insert the nodes you create with the call to append("svg:g").

Once you've added the svg:g elements, presumably you're going to add some rect or path elements to display the data? But I didn't see that code.

from d3.

[jmarca]

Thanks for the reply. Sorry, I wasn't clear in my original post. What I meant was that snippet of code was just inserted into the examples/stream/stack.html in the git repo checked out the other day.

In the stack example, you have an array of arrays. As I recall, four arrays of random data. I was trying to change as little as possible with your original example so as to add ids to the data, just to see if it would work. It failed, and so I wrote this issue.

Also, I'm aware the sum of values is a poor id ... it is just a hack to get a quasi-unique id for your random data in the example.

I haven't used gists, but I have a breaking example at

http://lysithia.its.uci.edu/d3examples/examples/stream/stack2.html

(I'm not turning that into a link in markdown because it is a development server and I'd rather not have robots hitting it).

Also, in working on this more last night, I noticed that if you call the exit() function on the layers object, I get a full stop crash...see stack4.html for that one. (Yes I realize that when you first fire up the graphic there is nothing to exit(), but in the generic nth case there might be data to exit()).

Also, if I put the enter() call in the same chain (if that is the word) with the original select, then the graphic elements are instantiated (see stack3.html for that one).

But even if I do that, calling exit() still crashes.

It is puzzling, because to me it looks identical to your demo code in the bars version 2 code (the one where the bars march across the page).

Regards,
James

[mbostock]

OK, I think I understand the problem. You need to reselect the layers after appending to the enter selection.

When you use the data operator, you get back the updating selection (the nodes that match the data). When you then use the enter operator, you get back the entering selection; calling append will create the nodes and append them to the document, but it won't affect the updating selection.

In the original example you modified, the layers variable was defined as the enter selection. In your code, you changed it to be the updating selection. So, the updating selection is empty when you subsequently initialize bars.

Similarly, in your stack4.html, you define layers as the entering selection, and then try to call the exit operator, which is undefined. It's best to structure your code to keep enter/update/exit separate, as in the overview section on Enter and Exit.

I'm considering adding a reselect operator, which would allow you to reunite your selection after you've done entering and exiting. But for now you can reselect by hand.

[jmarca]

Thanks for the insight. The bit I was missing was the need to reselect before adding the bars on to the layer. Now I understand better what the different operators return.

In my original attempt, I did have the data, enter, and exit steps separated, but no bars were being added because I needed to select the layers again.

Stack4 is now working, so I'll try to break it again with some exiting series.

Cheers,
James

[mbostock]

Glad it makes sense. Sorry for the confusion. I'll be covering enter and exit in more detail in part 2 of the bar chart tutorial. I'll make sure that I include something about nested enter and exit.