如何使用javascript对象在d3 v4中画线？

Question

I have the following object

var data =[
  {"steps":200,calories:200,distance:200,date:new Date(2012,09,1)},
  {"steps":200,calories:200,distance:200,date:new Date(2012,09,2)},
  {"steps":200,calories:200,distance:200,date:new Date(2012,09,3)},
  {"steps":200,calories:200,distance:200,date:new Date(2012,09,4)},
  {"steps":200,calories:200,distance:200,date:new Date(2012,09,5)},
]

I'd like to draw a graph between the steps and the date object in d3 v4

I'm doing something like this to draw a line. Here's the full code..

    var dataLine = [
  {"x":new Date(2012,0,1),"y":10},
  {"x":new Date(2012,0,2),"y":9},
  {"x":new Date(2012,0,3),"y":3},
  {"x":new Date(2012,0,4),"y":2}
];

var parseTime = d3.timeParse("%d-%b-%y");





var svgContainer = d3.select(".dsh-svg-element");

var MARGIN = {left:50,right:20,top:20,bottom:30};

var WIDTH  = 960 - (MARGIN.left + MARGIN.right);
var HEIGHT = 500 - (MARGIN.top + MARGIN.bottom);

svgContainer.attr("width",WIDTH+(MARGIN.left + MARGIN.right))
  .attr("height",HEIGHT+(MARGIN.top+MARGIN.bottom))
  .attr("transform","translate(" + MARGIN.left + "," + MARGIN.top + ")");

var xMax =100;
var yMax =100;

var x = d3.scaleTime().domain([new Date(2012,0,1), new Date(2012,0,31)]).range([0, WIDTH])
var y = d3.scaleLinear().domain([0,yMax]).range([HEIGHT,0]);

var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);

svgContainer.append("g").attr("transform", "translate(50," + (HEIGHT+MARGIN.top) + ")").call(xAxis)
svgContainer.append("g").attr("transform", "translate(50,20)").call(yAxis).attr("id","yAxis")




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




svgContainer.append("path")
.attr("d",lineFunction(dataLine))
.attr("stroke","blue").attr("stroke-width", 2).attr("fill", "none");

I checked the inspector, the x() and y() functions seem to be returning the right pixels to be drawn on the graph.

But the path of the line is "M-455079.8680521219,-5964102899550L-455079.86805246526,-5964491699550L-455079.86805452546,-5964880499550L-455079.8680548688,-5965269299550" in the inspector.. It seems to be drawing the line outside the svg element. Any idea how to fix this?

Any tips or simple code on drawing a line are appreciated.

Fiddle

Answer 1

You have 2 main problems:

First, your x domain is completely unrelated to your data array. Just use d3.extent to get the first and last date:

var x = d3.scaleTime()
    .domain(d3.extent(dataLine, function(d) {
        return d.x
    }))
    .range([MARGIN.left, WIDTH])

Second, your line generator is wrong, you're using dx with the y scale and dy with the x scale. It should be:

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

Here is your updated fiddle: https://jsfiddle.net/mxsLdntg/

Have in mind that the line in the fiddle is based on dataLine , not data . You have to decide which data array you want to use and set the domains accordingly.