D3 using Ember.js

I'm building an Ember.js's application. I would like to vizualize a Multiple line chart with dataset selection bound to a "select" element. The link is here. In my "index" template I added my select and a "visu-chart" component. I want to visualize my chart in the component but it doesn't work.

How can I do? Here is my code JSBIN

App = Ember.Application.create();

    App.IndexRoute = Ember.Route.extend({
      controllerName: 'application'
    });

    App.VisuChartComponent = Ember.Component.extend({
      didRenderElement: function() {
          var margin = {top: 20, right: 80, bottom: 30, left: 50},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

                var parseDate = d3.time.format("%Y%m%d").parse;

                var x = d3.time.scale()
                    .range([0, width]);

                var y = d3.scale.linear()
                    .range([height, 0]);

                var color = d3.scale.category10();

                var xAxis = d3.svg.axis()
                    .scale(x)
                    .orient("bottom");

                var yAxis = d3.svg.axis()
                    .scale(y)
                    .orient("left");

                var line = d3.svg.line()
                    .interpolate("basis")
                    .x(function(d) { return x(d.xValue); })
                    .y(function(d) { return y(d.yValue); });

                var svg = d3.select(".visu-chart").append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                  .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

                d3("data", function(error, data) {
                  if (error) throw error;

                  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "xValue"; }));

                  var data = this.get("agro");

                  data.forEach(function(d) {
                    d.xValue = parseDate(d.xValue);
                  });

                  x.domain(d3.extent(data, function(d) { return d.xValue; }));

                  y.domain([
                    d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.yValue; }); }),
                    d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.yValue; }); })
                  ]);

                  svg.append("g")
                      .attr("class", "x axis")
                      .attr("transform", "translate(0," + height + ")")
                      .call(xAxis);

                  svg.append("g")
                      .attr("class", "y axis")
                      .call(yAxis)
                    .append("text")
                      .attr("transform", "rotate(-90)")
                      .attr("y", 6)
                      .attr("dy", ".71em")
                      .style("text-anchor", "end")
                      .text("yValue (ºF)");

                      //Mise en place des lignes
        
                  svg.append("path")
                      .attr("class", "line")
                      .attr("d", function(d) { return line(d.values); })
                      .style("stroke", function(d) { return color(d.name); });

                  svg.append("text")
                      .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
                      .attr("transform", function(d) { return "translate(" + x(d.value.xValue) + "," + y(d.value.yValue) + ")"; })
                      .attr("x", 3)
                      .attr("dy", ".35em")
                      .text(function(d) { return d.name; });
                });
        },

        // Used only for scatter chart
      agro: 
      {
    "Biomass/100 (g DM/m2)": [
    {
    "xValue": 1,
    "yValue": 0
    },
    {
    "xValue": 2,
    "yValue": 10
    },
    {
    "xValue": 3,
    "yValue": 20
    },
    {
    "xValue": 4,
    "yValue": 25
    },
    {
    "xValue": 5,
    "yValue": 39
    }
    ],
    "C/N_{bio}": [
    {
    "xValue": 1,
    "yValue": 14.0833
    },
    {
    "xValue": 2,
    "yValue": 34.0833
    },
    {
    "xValue": 3,
    "yValue": 44.0833
    },
    {
    "xValue": 4,
    "yValue": 50.0833
    },
    {
    "xValue": 5,
    "yValue": 54.0833
    }
    ]
    }   
    });

body {
      font: 10px sans-serif;
    }

    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

    .x.axis path {
      display: none;
    }

    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;
    }

<!DOCTYPE html>
    <html>
    <head>
    <meta name="description" content="Ember-Charts Starter Kit" />
    <meta charset="utf-8">
    <title>Ember Charts Starter Kit</title>
      
      <link rel="stylesheet" href="http://ift.tt/1h2wPV6">
      <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://ift.tt/1jAc5cP" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="http://ift.tt/1QgFFRj" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="http://ift.tt/1jAc4pg" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
      
      <!-- Ember and dependencies -->
      <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
      <script src="http://ift.tt/1QgFHJ3"></script>
      
      <!-- Ember Charts and dependencies -->
      <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>
    </head>

    <body>
      <script type="text/x-handlebars">
        <h2> Welcome to Ember Charts!</h2>
        <p>Version 0.3.0</p>
        {{outlet}}
      </script>

      <script type="text/x-handlebars" data-template-name="index">
     <div class="col-md-3">
      <h3>Choisir le Groupe</h3>
      <div class="selectPicker">
        <select id="graphselection" name="dataset" action="change-dataset">
          <option value="all">All</option>
          {{#each dataset in model}}
            <option value="{{dataset}}">{{dataset}}</option>
          {{/each}}
        </select>
      </div>
    </div>

    <div class="col-md-9">
      {{visu-chart dataset=agro elementId="scatter-load"}}
    </div>
      </script>
      <script type="text/x-handlebars" id="components/visu-chart">
        <div class="visu-chart"></div>
      </script>
    </body>
    </html>