Throw an error if there are unexpected children of d3fc-svg/d3fc-canvas

[ColinEberhardt]

From @chrisprice on November 24, 2016 10:55

I've just debugged a weird problem in safari which came down to the following DOM structure -

<d3fc-svg>
  <svg>...</svg>
  <svg class="something">...</svg>
</d3fc-svg>

This is not an supported usage of the element. There are two workarounds -

• Move the svg.something inside the svg (useful if it relates to the content of the existing d3fc-svg)
• Move the svg.something to it's own d3fc-svg (useful if you want to use css layout)

We should throw an error if we detect more than one child node inside the d3fc-svg/d3fc-canvas elements.

Copied from original issue: d3fc/d3fc-element#24

[ColinEberhardt]

see: #80 for context

[duhaime]

@ColinEberhardt I'm working on a plot that wants to add a custom HTML tooltip to a plot: https://codepen.io/duhaime/pen/gOLGwvg

This error has cropped up a few times (I can't yet tell what triggers it). Is there a better pattern to position the tooltip inside the chart?

For context, the tooltip in my real app is a React component that's shared elsewhere in the app, so I'd prefer not to rewrite the DOM in SVG as is the case with the tooltip approach you used in your HathiTrust example (which is awesome and very instructive!), as I need my tooltip to match other instances of the same element throughout the app...

I'd be grateful for any thoughts you might have on the best approach to this problem!

[ColinEberhardt]

@duhaime I'd suggest looking at the following example: https://github.com/ColinEberhardt/d3fc-webgl-hathi-explorer

It uses the 'standard' pattern whereby all rendering is performed via a single data-join. The tooltip logic finds the closest point and updates the data that is data-joined to the chart, then re-renders.

The annotation itself is rendered using a simple annotation series component that wraps the d3-annotation library. The annotation is rendered using SVG, so is added to the SVG plot area of the chart.

Hope that helps.

[duhaime]

@ColinEberhardt Hmm, yes, but this approach would require that I rewrite the DOM rendered by React using D3, right? I'm hoping to just use the same component in two places to refrain from repeating myself in the code...