Why wouldn't this d3 chart render?

Question

I am trying to get a super basic nvd3 chart rendering. The code looks something like this (fiddle here):

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

and

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"
        }
      ];
    }

But when I run this nothing happens. No errors generated, no chart displayed. I copied/modified this code from the most basic example they offer, but I can't seem to figure out what I broke. Can anyone see what I am doing wrong here?

Answer 1

FIDDLE

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

...

d3.select('#chart svg')

Answer 2

Demo Fiddle

You forgot to select the svg element that you want to render your chart in. Also, call lineChart() instead of line() if you want to display the axis and other information:

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