d3.js referencing a single array column

Question

I have an array of generated values to plot a line function. However, when I call the array, the function only returns single values of the array, rather than the column, and hence draws a straight line (http://tributary.io/inlet/8822590). What is the correct syntax here? Thanks in advance.

// Create data

    var v1 = 4.137,
     t = 10,
     x = [],
     y = [];
 for (i = 0.1; i < 190; i += 0.1) {
     x.push(i);
     y.push((Math.pow((v1 / i), 1 / t) - 1) * 100);
 }
 var data = [x, y];
 // Scale data
 var xscale = d3.scale.linear()
     .domain(d3.extent(data, function (d) {
         return d[0];
     }))
 var yscale = d3.scale.linear()
     .domain(d3.extent(data, function (d) {
         return d[1];
     }))
 var line = d3.svg.line()
     .x(function (d) {
         return xscale(d[0])
     })
     .y(function (d) {
         return yscale(d[1])
     });
 var svg = d3.select("svg");
 var path = svg.append("path")
     .data([data])
     .attr("d", line) //this calls the line function with this element's data
 .style("fill", "none")
     .style("stroke", "#000000")
     .attr("transform", "translate(" + [96, 94] + ")")

What exactly do you want to plot?

VividD
– VividD

2014-02-05 13:20:45 +00:00
Commented Feb 5, 2014 at 13:20 — VividD
– VividD, Commented Feb 5, 2014 at 13:20

Lars Kotthoff · Accepted Answer · 2014-02-05 13:23:31Z

1

D3 expects the data for a line to be an array of array where each element determines one line and each element within the inner array the point of the line. You've passed in a single array (for one line) with two elements, so you get two points.

To plot all the points, push the coordinates as separate elements:

for (i = 0.1; i < 190; i += 0.1) {
  data.push([i, (Math.pow((v1/i),1/t)-1)*102]);
}

The rest of your code can remain basically unchanged. Complete example here.

answered Feb 5, 2014 at 13:23

Lars Kotthoff

109k16 gold badges210 silver badges210 bronze badges

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

Collectives™ on Stack Overflow

d3.js referencing a single array column

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related