Question

我对使用D3和NDV3作图非常陌生。

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

第一个图表很好，但是下一个单击的选项卡上的图表存在宽度问题。如果我重新调整窗口的大小，它将扩展到适当的大小。

这是基于他们的示例的代码。两种图表都是相同的代码-只是具有不同的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>

第一个标签很好-第二个标签很窄。

这是“基础”选项卡的链接。

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宽度错误

1 个答案: