NVD3 width error inside Tabs - d3.js

Question

I am very new to charting with D3 and NDV3.
I am putting the charts inside tabs. (Using Foundation 6.4)
The first chart is fine but the chart on the next clicked tab has a width issue. If I re-size the window it expands to the proper size.
Here is the code based on their example. Both charts are the same code - just with different IDs.
Thanks for any insight on using charts inside jquery tabs.
the code:
<div id="chart1"></div>
<script>
var chart;
var data;
var legendPosition = "top";
nv.addGraph(function () {
chart = nv.models.lineChart()
.options({
duration: 300,
useInteractiveGuideline: true
})
;
chart.xAxis
.axisLabel("Time (s)")
.tickFormat(d3.format(',.1f'))
.staggerLabels(true)
;
chart.yAxis
.axisLabel('Voltage (v)')
.tickFormat(function (d) {
return d3.format(',.2f')(d);
})
;
data = sinAndCos();
d3.select('#chart1').append('svg')
.datum(data)
.attr('height', 400)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
function sinAndCos() { ... }
</script>
First tab is fine - second one is very narrow.
this is the link for the Foundation Tabs.
https://foundation.zurb.com/sites/docs/tabs.html
Thank you very much. Cheers.

Answer 1

Looking at the source code of nvd3 the width and height are determined by the style attribute of the svg.
Add the svg to the div yourself and give it a style attribute. Maybe it also works with a CSS style width and height, for responsive websites. Just like an image you specify the size.
<div id="chart1">
<svg id="svg-chart1" style="width:800;height:400;"></svg>
</div>
<script>
....
d3.select('#svg-chart1')
.datum(data)
.call(chart);
....
</script>
Or with a different selector
<div id="chart1">
<svg style="width:800;height:400;"></svg>
</div>
<script>
....
d3.select('#chart1 svg')
.datum(data)
.call(chart);
....
</script>
I used the line chart example from the NVD3 site and got errors on these lines
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition?
so I commented them out. But looking at your example you set these with the options() method. Using options() I get the interactive guideline and no errors.