title: Displaying Data from Multidimensional Array in D3.js
body: <p>I'm trying to display data from a multidimensional array using d3. Using the code below, nothing is appearing in the browser. Inspecting element shows that the text of each element in each array exists, but they are just not appearing on the page. However, when I remove the lines that have been commented below, I get the example output below:</p>
  <pre class="lang-markdown prettyprint-override"><code>1,3,3,5,6,7
  
  3,5,8,3,2,6
  
  9,0,6,3,6,3
  
  etc ...
  </code></pre>
  <p>How can I modify the code so that I can display something like this:</p>
  <pre class="lang-markdown prettyprint-override"><code>1 3 3 5 6 7
  
  3 5 8 3 2 6
  
  etc...
  </code></pre>
  <p>The code:</p>
  <pre class="lang-js prettyprint-override"><code>var dataset = [
      [1,3,3,5,6,7],
      [3,5,8,3,2,6],
      [9,0,6,3,6,3],
      [3,4,4,5,6,8],
      [3,4,5,2,1,8]
  ];
  
  var svg = d3.select(&quot;body&quot;)
      .append(&quot;svg&quot;)
      .attr(&quot;width&quot;, w)
      .attr(&quot;height&quot;, h);
  
  svg.append(&quot;g&quot;)
      .selectAll(&quot;p&quot;)                 
      .data(dataset)
      .enter()
      .append(&quot;p&quot;) // removing
      .selectAll(&quot;text&quot;) // these
      .data( function(d,i,j) { return d; } ) // lines
      .enter() // text displays normally
      .append(&quot;text&quot;)
      .text( function(d,i,j) { return d; } )
      .attr(&quot;x&quot;, function(d,i,j) { return (i * 20) + 40; })
      .attr(&quot;y&quot;, function(d,i,j) { return (i * 20) + 40; })
      .attr(&quot;font-family&quot;, &quot;sans-serif&quot;)
      .attr(&quot;font-size&quot;, &quot;20px&quot;)
      .attr(&quot;fill&quot;, textColour);
  </code></pre>
  <p>This is what inspecting element gives with a different array of numbers:</p>
  <p><img src="https://i1096.photobucket.com/albums/g322/tearfulheart/Screenshot2014-02-12at212716.png" alt="enter image description here" /></p>