为什么这个d3图表不会渲染？

Question

我想获得一个超级基本的nvd3图表渲染。 代码看起来像这样（ 在这里小提琴 ）：

<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

小提琴

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

...

d3.select('#chart svg')

Answer 2

演示小提琴

您忘记选择要在其中渲染图表的svg元素。另外，如果要显示轴和其他信息，请调用lineChart()而不是line() ：

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