title: D3: multidimensional array of lines
body: <p>i want to add a multidimensional array of lines to my SVG with the D3 library. But somehow the lines don´t show up. There is no error message from javascript so i guess i can not be totally wrong but something is missing. I tried to use the description of Mike Bostock as an example <a href="http://bost.ocks.org/mike/nest/" rel="nofollow">http://bost.ocks.org/mike/nest/</a></p>
  
  <p>I have an array of lines that looks like that: </p>
  
  <pre><code>var datasetPolylines = [[[-10849.0, 1142.0, -10720.0, 454.0],[x1, y1, x2, y2],[x1, y1, x2, y2]...],[polyline],[polyline]...];
  </code></pre>
  
  <p>For every Line there are 4 points in the array for <code>x</code> and <code>y</code> values of the line.</p>
  
  <p>Now i try to add them to my mainsvg like that:</p>
  
  <pre><code>d3.select("#mainsvg").selectAll("g")
                      .data(datasetPolylines) 
                      .enter()
                      .append("g")
                      .selectAll("line")
                      .data(function (d) {return d;})
                      .enter()
                      .append("line")
                      .attr("x1", function(d, i) { 
                 return xScale(i[0]);
                         })
                  .attr("y1", function(d, i) {
                 return yScale(i[1]);
                         })
                  .attr("x2", function(d, i) {
                 return xScale(i[2]);
                       })
                  .attr("y2", function(d, i) {
                     return yScale(i[3]);
                       })
                      .attr("stroke-width", 2)
                      .attr("stroke", "blue")
                      .attr("fill", "none");
  </code></pre>
  
  <p>I´m very thankful for every hint on where I´m wrong. I´m on this stuff now for some days and just don´t get it :(</p>
  
  <p>Everything works fine if i just draw one polyline with many lines and use the .data attribute just once. I cannot merge the lines to one path also, because they are not always connected and must be drawn seperately.</p>
  
  <p>The complete (and now thanks to Christopher and Lars also working) code example looks like that:</p>
  
  <pre><code>var datasetLines = [];
  var datasetPolylines = [];
  
  /**Add a line to the dataset for lines*/
  function addLineToDataset(x1, y1, x2, y2){
  var newNumber1 = x1;    
  var newNumber2 = y1;    
   var newNumber3 = x2;
  var newNumber4 = y2;
  datasetLines.push([newNumber1, newNumber2, newNumber3, newNumber4]);
  }
  
  /**Add polyline to the dataset for polylines*/
  function addPolyline(){
  
  var polyline = [];
  
   for (i in datasetLines) {
      polyline[i] = datasetLines[i];
  }
  datasetPolylines.push(polyline);  
  }
  
  
  /**Draw all polylines from the polylinearray to the svg*/
  function showPolylineArray(){
  
  //Create scale functions for x and y axis
  var xScale = d3.scale.linear()
                       .domain([d3.min(outputRange, function(d) { return d[0]; }),  d3.max(outputRange, function(d) { return d[0]; })])//get minimum and maximum of the first entry of the pointarray
                       .range([padding, w - padding]); //w, the SVGs width. without padding 0,w
  
  var yScale = d3.scale.linear()
                       .domain([d3.min(outputRange, function(d) { return d[1]; }),  d3.max(outputRange, function(d) { return d[1]; })])
                       .range([h - padding, padding]); //without padding h,0
  
  d3.select("#mainsvg").selectAll("g")
                      .data(datasetPolylines)
                      .enter()
                      .append("g")
                      .selectAll("line")
                      .data(function (d) {return d;})
                      .enter()
                      .append("line")
                      .attr("x1", function(d) {
                            return xScale(d[0]);
                       })
                      .attr("y1", function(d) {
                           return yScale(d[1]);
                       })
                      .attr("x2", function(d) {
                           return xScale(d[2]);
                       })
                      .attr("y2", function(d) {
                          return yScale(d[3]);
                       })
                      .attr("stroke-width", 2)
                      .attr("stroke", "blue")
                      .attr("fill", "none")
                      .on('mouseover', function(d){ d3.select(this).style({stroke: 'red'}); })
                      .on('mouseout', function(d){ d3.select(this).style({stroke: 'blue'}); })
                      .append("title")
                      .text("Polyline");
  
  }
  </code></pre>