如何使用javascript对象在D3V4中画一条线？

我有以下目标

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)},
]

我想在D3V4中的

步骤

和

日期

对象之间绘制一个图形

我这样做是为了划清界限。这是完整的代码

    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");

我检查了检查器，x（）和y（）函数似乎返回了要在图形上绘制的正确像素

但该行的路径是

“M-455079.8680521219，-5964102899550L-455079.86805246526，-5964491699550L-455079.86805452546，-596488049550L-455079.8680548688，-596526929550”

。。它似乎在svg元素之外画了一条线。你知道怎么解决这个问题吗

任何关于画线的提示或简单代码都将不胜感激

---

您有两个主要问题：

首先，您的

x

域与您的数据数组完全无关。只需使用

d3.extent

即可获得第一个和最后一个日期：

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

第二，您的行生成器错误，您正在使用

d.x

和

y

比例，而

d.y

和

x

比例。应该是：

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

这是你最新的小提琴：

---

请记住，小提琴中的线是基于

数据线

，而不是

数据

。您必须决定要使用哪个数据数组，并相应地设置域。

添加代码的结果，您应该使问题清晰，易于理解当前状态。@artgb使用inspector outputAlso Fiddle编辑@ARTGB您的小提琴在控制台中有很多错误，我在您的小提琴中找不到使用

数据
变量。非常感谢，这为我节省了很多时间。我还在试着绕着d3转。您是否有任何链接/指南可以帮助我更好地理解d3？在我看来，作为介绍性书籍，最好的是Scott Murray的：