选项卡内的 NVD3 宽度错误

Question

我对使用 D3 和 NDV3 绘制图表还很陌生。

我将图表放在标签中。（使用 Foundation 6.4）

第一个图表没有问题，但下一个单击选项卡上的图表存在宽度问题。如果我重新调整 window 的大小，它会扩展到合适的大小。

这是基于他们示例的代码。两个图表都是相同的代码 - 只是 ID 不同。

感谢您提供有关在 jquery 选项卡中使用图表的任何见解。

代码：

          <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>

第一个选项卡很好 - 第二个选项卡很窄。

这是基础选项卡的link。

https://foundation.zurb.com/sites/docs/tabs.html

非常感谢。干杯。

Answer 1

查看 nvd3 的源代码，宽度和高度由 svg 的 style 属性决定。

自己将 svg 添加到 div 并为其赋予 style 属性。也许它也适用于响应式网站的 CSS 样式宽度和高度。就像您指定尺寸的图像一样。

<div id="chart1">
    <svg id="svg-chart1" style="width:800;height:400;"></svg>
</div>
<script>
  ....
  d3.select('#svg-chart1')
    .datum(data)
    .call(chart);
  ....
</script>

或使用不同的选择器

<div id="chart1">
    <svg style="width:800;height:400;"></svg>
</div>
<script>
  ....
  d3.select('#chart1 svg')
    .datum(data)
    .call(chart);
  ....
</script>

我使用了来自 NVD3 站点的折线图示例，但在这些线上出现了错误

            .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
            .transitionDuration(350)  //how fast do you want the lines to transition?

所以我把它们注释掉了。但是看看你的例子，你用 options() 方法设置了这些。使用 options() 我得到了交互式指南并且没有错误。

选项卡内的 NVD3 宽度错误

NVD3 width error inside Tabs

tabs

d3.js

zurb-foundation

nvd3.js