Uncaught TypeError: d.getBBox is not a function

[susielu]

Uncaught TypeError: d.getBBox is not a function

[susielu]

Can you post the code you're using with the legend?

[susielu]

I am going to close this issue please respond if you want it re-opened.

[raubreywhite]

Hi,

I have the same problem

I'm using it within a react app, so the top part of the code is:

var d3=require('d3')
import legend from 'd3-svg-legend'

and the legend:

mainGraph.append('g')
.attr('transform', 'translate(20,20)')
.call(
legend.legendColor()
.shape('path', d3.symbol().type(d3.symbolTriangle).size(150)())
.shapePadding(10)
.scale(colour)
)

[raubreywhite]

The exact file that I am trying this in is:

https://github.com/raubreywhite/sykdomspuls_reactjs/blob/60bbfa8766a1fcdd7c88a1cfd5307e9418b59ca5/src/Barometer.js

(the entire repository is my react app in total)

Thanks in advance!

[susielu]

@raubreywhite
I looked into your project to figure out why this is happening. It's because you're using the ReactFauxDOM element. At the time the legend code is called there are no elements in the DOM yet so when it's looking for the elements bounding box it can't find the element.

I put the following code in your App.js file's componentDidMount and it did display the legend correctly.

d3.selectAll('#root')
    .append('svg')

    d3.selectAll('svg')
      .append('g')
      .attr('transform', 'translate(10,10)')
      .call(
        legendColor()
        .shape("path", d3.symbol().type(d3.symbolTriangle).size(150)())
        .shapePadding(10)
        .scale(d3.scaleOrdinal()
        .range([ '#91cf60', '#ffffbf', '#fc8d59' ])
        .domain([0, 1, 2]))
    )

One option you could use is the components that are using Barometer, wrap that in an SVG with a Barometer class or id:
<svg className="barometer"><Barometer data={this.state.data} brushValues={this.state.brushValues} width={this.state.dimensions.width}/></svg>

Then within your Barometer component you should be able to select that SVG directly since it will be rendered by the parent already.

[raubreywhite]

Thank you!