Geek Answers Handbook

Transferring data to d3.svg.line ()

So, I have a Javascript object, for example: -

Object {data: Array[39], time: Array[39]}

object.data is an array of values, and object.time is an array of javascript date objects.

I am trying to build a line graph in D3. Relevant parts of my code:

  // Line function var line = d3.svg.line() .x(function(d,i) { return x(d.time); }) .y(function(d,i) { return y(d.data); }); // Draw Line svg.append("path") .datum([data]) .attr("class", "line") .attr("d", line);

The axes are in place, as they should be with the data, but the line is not displayed. I assume that I am not returning the values ​​for the x and y-accessories of the line function as they should be. Any pointers?

Edit:

 function draw(data) { // Margins and stuff var margin = {top: 20, right: 20, bottom: 20, left: 40}; var width = 940 - margin.left - margin.right; var height = 500 - margin.top - margin.bottom; // X and Y axis' data var xAxisData = data.time; var yAxisData = data.data; // Scales var x = d3.time.scale().domain(d3.extent(xAxisData)).range([0, width]); // var x = d3.scale.linear().domain([100, 500]).range([0, width]); var y = d3.scale.linear().domain(d3.extent(yAxisData)).range([height, 0]); //Axes var xAxis = d3.svg.axis().scale(x).orient("bottom"); var yAxis = d3.svg.axis().scale(y).orient("left"); //Base Layer var svgContainer = d3.select('#graph').append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Draw them Axes svgContainer.append("g").attr("class","axis bottom").attr("transform", "translate(0," + height + ")").call(xAxis); svgContainer.append("g").attr("class","axis left").call(yAxis); // Line function var line = d3.svg.line() .x(function(d,i) { console.log(i); return x(i); }) .y(function(d,i) { console.log(d); return y(d.data); }); var lineData = data.time.map(function (_, idx) { console.log(data.data[idx], data.time[idx]); return { data: data.data[idx], time: data.time[idx] }; }); // Draw the Line svgContainer.append("path") .datum([lineData]) .attr("class", "line") .attr("d", line); }
+7
javascript
source share
2 answers

Your data is really not a friendly line format, you need to transfer it before d3.svg.line can interpret it.

 var lineData = data.time.map(function (_, idx) { return { data: data.data[idx], time: data.time[idx] }; });
+3
source share
 svg.append("path") .attr("class","line") .attr("d",line(object));

The entire path is the only SVG element, so you can pass all the data to it using point values.

+2
source share

More articles:


All Articles