Question

我正在尝试获得超级基本的nvd3图表渲染。代码看起来像这样（fiddle here）：

<div id="chart" class="chart with-transitions">
    <svg></svg>
</div>

和

nv.addGraph({
  generate: function() {

    var chart = nv.models.line()
                .margin({top: 20, right: 20, bottom: 20, left: 20})
    d3.select('#chart')
      .datum(sinAndCos())
      .call(chart);

    return chart;
  }});


    function sinAndCos() {
      var sin = [],
          cos = [];

      for (var i = 0; i < 100; i++) {
        sin.push({x: i, y: Math.sin(i/10)});
        cos.push({x: i, y: .5 * Math.cos(i/10)});
      }

      return [
        {
          values: sin,
          key: "Sine Wave",
          color: "#ff7f0e"
        },
        {
          values: cos,
          key: "Cosine Wave",
          color: "#2ca02c"
        }
      ];
    }

但是当我跑步时，没有任何事情发生。没有生成错误，没有显示图表。我从他们提供的最基本的例子中复制/修改了这段代码，但我似乎无法弄清楚我打破了什么。谁能看到我在这里做错了什么？

Answer 1

FIDDLE

<div id="chart" class="chart with-transitions">
    <svg height="500"></svg>
</div>

...

d3.select('#chart svg')

Answer 2

<强> Demo Fiddle

您忘记选择要在其中呈现图表的svg元素。如果您想显示轴和其他信息，请致电lineChart()而不是line()：< / p>

var chart = nv.models.lineChart() <-- lineChart()
                .margin({top: 20, right: 20, bottom: 20, left: 20});
    d3.select('#chart svg') <-- include svg
      .datum(sinAndCos())
      .call(chart);

为什么这个d3图表不会呈现？

2 个答案: