d3js Star Chart - responsive legend

Question

I am working on a d3.js chart - This current model creates a legend segment as ag element. I'd like to ensure the legend stacks below if there is not enough room in the container.

//desktop - ample space

//mobile - not enough space

I've cleaned up the legend part -- you able to clean up the code base and add some more comments here. One of the old features I had - is if there wasn't enough room in the chart the legend stacks underneath - like responsive design - I used to create 2 svg parts but apparently with d3 it should only be 1 svg - http://jsfiddle.net/h066yn5u/13/ see if the chart can be more dynamic with different sizes - I think I had to add a padding of 10 to the radius to give it a little gap between the edges.. maybe though its a case of adding a transform on the svg itself to add that padding

var arcchart = chart.append("g")
    .attr("class", "starchart")
    .attr("transform", "translate("+(r+10)+"," + h / 2 + ")");



var legend = chart.append("g")
    .attr("class", "legend")
    .attr("transform", "translate(" + ((r + 10) * 2) + "," + (h / 4) + ")");

a version where it splits the chart into two svgs http://jsfiddle.net/h066yn5u/14/

Answer 1

There are multiple ways to solve this issue.

1. Split into 2 svg containers: d3.js is not bound to just one svg container. You can split up the legend and the chart into 2 seperate svg containers and let the HTML handle the flow of the page
2. Use foreignObject: If you don't want to do that. You can try to use tag. Remember, that this is not supported by ie11 (and edge either afaik)
3. Calculate everything by hand: calculate the width of your legend (and including text), the width of the chart and get the available width for your whole container. If the whole container width is too small, push the legend below and of course adjust the svg height and width accordingly.