Daniel Verejan Daniel Verejan - 9 days ago 5
Javascript Question

D3 chart legend

Is it a bad practice to create a chart legend using html and not svg?
For example instead of

d3.select('g.chart-legend').append('text')
.text('ID');


with html

d3.select(div.chart-legend').append('span')
.text('ID');

Answer

No it's not. It depends upon the requirements. In general, if you are using svg based legends, it will be easier to draw shapes and place legends relative to your svg elements and if you go with html based legends, text reflow would be easier in case of dynamically obtained legends. Might be useful if you might end up with a lot of legends with long text and/or looking at responsive layouts.

Note that you would have to add your legends outside of your root svg element in case you want to add html based legends. So a part of your chart will outside of the svg. So if you're looking at any way of saving the svg or serializing it, you'll miss out on the legends.

Comments