score:1

Accepted answer

d3 works best when working with an array of objects. I would suggest restructuring your raw data so it looks like this:

[{x:1, y:2}, {x:2, y:100}, {x:3, y: 321}, ect}]

Right now,

.selectAll("li")
.data(data)

is joining each element of the data array to an 'li' element. Since data looks like this:

[
    "x":[1, 2, 3, ect], 
    "y:[2, 100, 321, ect]
]

there are only two elements to join, "x" and "y". When you try to look up each elements x property with 

.text(function (d, i){
        console.log(d.x[i]);

it doesn't exist because 'd' is just an array.

score:0

Since d3 works best with and array of objects it would be best to restructure the raw data. If restructuring the raw data is not an option you can do restructure the data on-the-fly at runtime. The code in this fiddle should do the trick.

If you don't want to change the data you can also use it as-is if you change some parts script. Instead of passing data to the .data() function pass data.x or data.y. If you do this you can look at the corresponding element by data.x[i] Here is a fiddle demonstrating this.


Related Query

More Query from same tag