Help with enter, update and exit line graph

Could someone help me with the first graph in this notebook? It plots color metrics for the selected gradient. When the user choses a new color map from the drop down, or changes the check box metrics, I’d like the lines to smoothly appear, disappear or move to their new location.

Only the enter works. How can I have the text and lines move to new positions when the user selects a different color scale, and have metrics fade in and out when the user checks the color metric boxes?

The problem is with your selectAll. You have this:

paths = svg.selectAll("lines")

The string you give to selectAll isn’t just a name, it’s a CSS selector that is supposed to select all relevant elements. Because “lines” doesn’t ever refer to anything you append to the document, d3 always starts with a blank selection and has nothing to update or exit.

If you change that to

path = svg.selectAll("path")

to match the .append("path") call, it works for me. You’ll also need to update the selectAll("labels") call to be selectAll("text").

1 Like

Oh hell yes, thanks, that definitely fixes the transitions.

I’m still having a problem with the text and lines entering correctly. Let’s say I start with the [C*, V*, D*] data, and then I add in RGB, so now I’m graphing [R, G, B, C*, V*, D*], the new RGB data copies the color and name of C* V* D*. Do I need to be careful of the order?

Also, if start with

[C*, V*, D*],

and then turn off C* so now the data is

[V*, D*],

the D* (the 3rd position in the original data array) is removed, C* move to the V* position, and V* moves to the D* position. Can I enter and exit data and remember the name of the property I’m graphing?

Last, if use selectAll("text") for the graph labels, it also effect the x and y axis ticks. Maybe if I remembered the name of the text, it wouldn’t effect the axis?

For the last part, the answer would be to use a more specific selector for your selectAll. Perhaps selectAll("text.label"), and then in your enter selection do .append("text").classed("label", true).

For the first part, I think that what you need to do is provide a “key” to .data(): Joining data | D3 by Observable. I think that would like .data(metrics.line, d => d.name) for you.

1 Like

Now it works perfectly. Thank you SO MUCH!! You saved me days of headaches and trial and errors to figure out this solution myself. I really appreciated it!

1 Like