Multiple Lines from Multiple Data D3js

Question

I would expect the following code to plot two different lines on the same svg but it only returns two empty path>

<body>

<svg width="960" height="500"></svg>

<script>

data = [
{ Name: "line1", color: "blue", Points: [{x:0, y:5 }, {x:25, y:7 }, {x:50, y:13}] },
{ Name: "line2", color: "green", Points: [{x:0, y:10}, {x:25, y:30}, {x:50, y:60}] }
];

var line = d3.line()
  .x(function(d, i) {return d.x})
  .y(function(d, i) {return d.y})

var lines = d3.select("svg")
    .selectAll("path")
    .data(data)
    .enter()
        .append("path")
        .attr("d", line);

</script>

</body>

I cannot find multiple line charts example that have a data structure similar to mine.

SteveR · Accepted Answer · 2018-02-17 21:13:37Z

1

The issue is that you are passing the whole object from your array of data to the line() function, which is expecting an array of points. One alternative is to change the calling function to pass in only the Points array, something like this (untested):

.enter()
    .append("path")
    .attr("d", function(d) { return line(d.Points); })

answered Feb 17, 2018 at 21:13

SteveR

1,1498 silver badges13 bronze badges

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

1 Comment

user3755529 Over a year ago

damn yes, I see, instead I was doing it with .attr("d", line(function(d) { return d.Points; }))

Xavier Guihot · Accepted Answer · 2018-02-17 21:12:12Z

1

In fact you need to access the Points field of each element of the data array:

Within:

var lines = d3.select("svg")
  .selectAll("path")
  .data(data)
  .enter()
    .append("path")
    .attr("d", line);

replace

.data(data)

by

.data(data.map( function(d) { return d.Points }))

answered Feb 17, 2018 at 21:12

Xavier Guihot

62.8k26 gold badges320 silver badges202 bronze badges

Collectives™ on Stack Overflow

Multiple Lines from Multiple Data D3js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related