Displaying Data from Multidimensional Array in D3.js

Question

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:

1,3,3,5,6,7

3,5,8,3,2,6

9,0,6,3,6,3

etc ...

How can I modify the code so that I can display something like this:

1 3 3 5 6 7

3 5 8 3 2 6

etc...

The 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("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

svg.append("g")
    .selectAll("p")                 
    .data(dataset)
    .enter()
    .append("p") // removing
    .selectAll("text") // these
    .data( function(d,i,j) { return d; } ) // lines
    .enter() // text displays normally
    .append("text")
    .text( function(d,i,j) { return d; } )
    .attr("x", function(d,i,j) { return (i * 20) + 40; })
    .attr("y", function(d,i,j) { return (i * 20) + 40; })
    .attr("font-family", "sans-serif")
    .attr("font-size", "20px")
    .attr("fill", textColour);

This is what inspecting element gives with a different array of numbers:

enter image description here

You're mixing SVG elements g and text with non-SVG element p. That's not valid; the browser doesn't know how to render that. If your viz is going to be all text, then stick with just plain html elements. If you need to use SVG (because there'll be some graphics coming), then lose the p. — meetamit
– meetamit, Commented Feb 12, 2014 at 21:30
I'm not sure what you're looking for, but this is basically the canonical nested selection example -- jsfiddle.net/f4vAm/1 — Lars Kotthoff
– Lars Kotthoff, Commented Feb 12, 2014 at 21:32
@meetamit the same happens if I replace all "p" with "text". — 201403540
– 201403540, Commented Feb 12, 2014 at 21:33
@LarsKotthoff Thanks! that is exactly what I was looking for, where did I go wrong? — 201403540
– 201403540, Commented Feb 12, 2014 at 21:34

Lars Kotthoff · Accepted Answer · 2014-02-12 21:36:43Z

7

You're almost there, there are only two minor things:

As pointed out by metaamit, there's no p element in SVG -- use g instead.
For the y position, use index j of the parent element instead of i.

Complete example here.

answered Feb 12, 2014 at 21:36

Lars Kotthoff

109k16 gold badges210 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

201403540 Over a year ago

I initially had the lines: .selectAll("p") and .append("p") //removing with the "p" as "text", do you know why the text didn't display then?

Lars Kotthoff Over a year ago

You can't nest text in text elements either in SVG.

O.O Over a year ago

it doesn't work with me! I received an error : "Error: <text> attribute y: Expected length, "NaN"." in this line : return (j * 20) + 40; J is a text element not a scalar.

Collectives™ on Stack Overflow

Displaying Data from Multidimensional Array in D3.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related