Each datum `d` selection.join key is mapped to `d.fn` resulting in duplicate keys for the same function

[mauriciopoppe]

Given this data:

data: [
  {fn: 'x'},
  {fn: 'x'},
]

Is making the following join:

function-plot/src/chart.ts

Lines 550 to 558 in 602f9eb

	.data(
	(d: FunctionPlotOptions) => {
	return d.data
	},
	(d: any) => {
	// The key is the function set or other value that uniquely identifies the datum.
	return d.fn || d.r || d.x || d.text
	}
	)

Return the key x for both values even though there are two different functions.

Evaluate changing the key to be a unique id that identifies each datum instead.

[Linho1219]

However, based on my testing, I haven’t noticed any visible impact on the rendered output due to this issue so far.

I'm currently working on a GUI playground for function-plot — the repo is here, and the live app is here. It’s still a work in progress, but it's already useful for testing issues like this.

While developing it, I’ve come across several issues related to graph updates. In addition to #342 and #344, updating vectors, annotations, xAxis, and yAxis can also cause problems in certain cases. My current workaround is to force a full component re-render using Vue's key attribute. I'm not sure whether function-plot is designed to handle such high-frequency updates, so I haven’t opened additional issues. But if you're open to it, I’d be happy to organize and report them properly.

For this issue, here's an example you can try: link

[mauriciopoppe]

Thank you for sharing your app and an example of the issue not showing there!

I set up these two calls:

      const options = {
        target: '#playground',
        data: [
          { fn: 'x', HIDDEN: 1 },
          { fn: 'x', HIDDEN: 2 },
        ]
      }
      functionPlot(options)

      const newOptions = {
        target: '#playground',
        data: [
          { fn: 'x^2', HIDDEN: 2 },
          { fn: 'x^2', HIDDEN: 1 },
        ]
      }
      functionPlot(newOptions)

During a render I added it as an attribute to the g.graph tag.

      selection.attr('data-foo', (d) => (d as any).HIDDEN)

As a result I saw them rendered in order in both cases, the last render results in:

I didn't fully understand how the key is used when there are repeated values in https://d3js.org/d3-selection/joining but that's ok, thanks for checking.