Support for key functions?

[mindjuice]

I can't seem to find any an existing way to set a key function for object constancy (http://bost.ocks.org/mike/constancy/)

Is this supported?

I'm drawing a lineWithFocusChart.

[adnasa]

I don't follow what you really need to accomplish, so you will have to forgive my reply. But at least I'd like to share what i've learned the past 30 minutes and hopefully it gives you some guidance on how to solve your request.

Does the following solve your problem? (experimented a little with examples/lineWithFocusChart

        d3.select('#chart svg')
            .data([testData()], function(data) {
                // return the unique identifier here
            }).call(chart);

the biggest difference with selection.data and selection.datum is how they compute the selection with the bound data sent in. in the nvd3 models, the data you send is required to be an array and each item within that array has to have a values property to crunch the numbers for those lines you want to draw.

After digging around the code I realised that if you need to go beyond what I've described above, perhaps you need to dig a little deeper in nv.models.lineChart. I'd start on line 154.

There is definitely room to hook in a key function right there to determine the identifier for each value in your data. :sob:

[mindjuice]

Thanks, and sorry for being lazy. I should have found that myself.

Without object constancy, the graph animations are weird when I truncate data from the front of the array (reach max number of samples that I want to keep). Instead of just scrolling the data points over right-to-left, it animates each data point to a new vertical position, which looks really strange. This occurs because D3 uses the array index by default as the object key.

Looking at line 154, yeah, clearly it doesn't pass in a key function there.

I'll implement this next week when I task switch back to this project, and I'll put together a PR.

[adnasa]

so I can presume now that starting to hook a key function on L154 could put you into the right direction, yes? have fun! :smile:

[liquidpele]

Oh, neat, haven't played with key functions before. Looks like something that could be baked in pretty easily though... if you do it please send us a PR!

[adnasa]

:+1:

[mindjuice]

So this isn't going quite how I expected.

Turns out that on these lines: https://github.com/novus/nvd3/blob/master/src/models/line.js#L95-L96

it already looks for akey property for each time series, which is fine, but doesn't help with the problem I have.

Then on these lines: https://github.com/novus/nvd3/blob/master/src/models/line.js#L144-L145

it passes in the array of values for a given time series entry and then just below uses that data to create an svg path.

Unfortunately, you can't set keys for individual points in an svg path, which is sort of what I was thinking of (i.e., associate each point with its timestamp so that animation works properly).

I thought of another way to accomplish this, and it could all be done in nvd3 with a bit of cooperation from the app when passing in the data.

• Add an option named maxSamples to the charts where it makes sense.
• If nvd3 is given a data array with more than maxSamples, then it will first draw the samples with no animation and with the group positioned at its default position. The assumption here is that the samples are the same as last time, but with one or more new samples on the end of the array. For this to work properly, the extra samples would need to be drawn off the right side of the graph and clipped. Not entirely sure how to do that yet. Something with the scale or domain maybe. Perhaps the animation of the groups could also be done by changing the scale or domain instead of manually transitioning the groups. Needs some more thought here.
• nvd3 will then perform a transition() on the group object to animate the samples from right to left until the extra samples are all off the left side (they should be no longer visible due to clipping). It will also need to set the x axis and transition() it too.
• On the next cycle, the app would add one or more new data points to the end of the array, always sending in at least maxSamples + 1 data entries into the nvd3 chart. It would also need to remember how many entries were added in the previous cycle, and remove that many from the front of the array. Normally, this would mean adding one sample to the end and removing one sample from the front.

I'm sure there are a lot of details to get this right, and I'm going to let this percolate for a day or two before I try implementing anything.

If anyone has any other ideas, or sees a problem with this I'm all ears!