d3 v4でjavascriptオブジェクトを使用して線を描くにはどうすればよいですか？

Question

私は次のオブジェクト

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

を持っている私は、私はラインを描画するために、このような何かをやっているD3 v4の

でstepsとdateオブジェクト間のグラフを描画したいと思います。ここでは、完全なコードは、私はインスペクタをチェックし...

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,-5964880499550L-455079.8680548688,-5965269299550"です。それはsvg要素の外に線を引っ張っているようです。どのようにこれを修正するための任意のアイデア？

1つの線を描く際のヒントや簡単なコードがありがたいです。

Fiddle

Answer 1

あなたは2つの主要な問題を抱えて：

まず、あなたのxドメインは、あなたのデータ配列とは全く無関係です。ただ、最初と最後の日付を取得するためにd3.extentを使用します。

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

第二に、あなたのラインジェネレータを使用すると、x規模でy規模でd.xとd.yを使用している、間違っています。それは次のようになります。

https://jsfiddle.net/mxsLdntg/はフィドルの行がdataLine、ないdataに基づいていることを念頭に置いておいてください。

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

はここにあなたの更新フィドルです。使用するデータ配列を決定し、それに応じてドメインを設定する必要があります。