Giter Site home page Giter Site logo

problem with enter, exit usage about d3 HOT 5 CLOSED

d3 avatar d3 commented on March 29, 2024
problem with enter, exit usage

from d3.

Comments (5)

mbostock avatar mbostock commented on March 29, 2024

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 avatar jmarca commented on March 29, 2024

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

from d3.

mbostock avatar mbostock commented on March 29, 2024

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.

from d3.

jmarca avatar jmarca commented on March 29, 2024

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

from d3.

mbostock avatar mbostock commented on March 29, 2024

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.

from d3.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.