グラフのデータポイントをx軸のティックに整列させる

Question

数ヶ月にわたって収集されたデータを表す折れ線グラフを作成したかったのです。私は下のコードを思いついた。問題は、私がラインがデータを正しく表現しているとは思わないということです。 path行が "4 mo"ティックにならないことがわかり、データが約3ヶ月半で終了するとユーザーに伝えます。

ティックに適切にマッチさせるために、すべての頂点（データポイントを視覚化した適切な用語がわからない）が必要です。最初のデータポイントは「1ヶ月」の上に、2番目のデータポイントは「2ヶ月」などと整列する必要があります。これは非常に重要です。最後のデータポイントは、グラフと月4は、軸線の終わりにもなければなりません。今のところ、行はsvgの全幅には及ばない。

var data = [ 
 
    {"quarter" : "1mo", "votes" : 400}, 
 
    {"quarter" : "2mo", "votes": 200}, 
 
    {"quarter": "3mo", "votes" : 1000}, 
 
    {"quarter" : "4mo", "votes" : 0} 
 
] 
 

 
var width = 500; 
 
var height = 300; 
 
//supposed to get the domain ([0, 1000]) 
 
var yscale = d3.scale.linear().domain([0, d3.max(data, function(d) {return d.votes})]) 
 
yscale.range([height, 0]) 
 

 
console.log(yscale(900)) //291 
 

 
var xscale = d3.scale.ordinal() 
 
.domain(data.map(function(d) {return d.quarter})) 
 
.rangeRoundBands([0,width]) 
 

 
var xAxis = d3.svg.axis().scale(xscale).orient("bottom") 
 

 

 
var line = d3.svg.line() 
 
.x(function(d){return xscale(d.quarter) }) 
 
.y(function(d) {return yscale(d.votes) }) 
 
// .interpolate("basis") 
 

 
var svg = d3.select("body") 
 
.append("svg") 
 
.attr({ 
 
    "width" : (width + 20), 
 
    "height": height + 20 
 
}) 
 

 
svg.append("g") 
 
.append("path") 
 
.attr("d", line(data)) 
 
.attr({ 
 
    "fill" : "none", 
 
    "stroke" : "limegreen", 
 
    "stroke-width" : "3px" 
 
}) 
 

 
svg.append("g") 
 
.call(xAxis) 
 
.attr({ 
 
    "transform" : "translate(0," + (height) + ")" 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

Answer 1

あなたはrangeBandの中央に頂点のそれぞれをシフトする必要があります。

var line = d3.svg.line() 
    .x(function(d){return xscale(d.quarter) + xscale.rangeBand()/2 }) 
    .y(function(d) {return yscale(d.votes) }); 

あなたは順序尺度hereについての詳細を読むことができます。

あなたは0から開始し、xは、刻みたい場合は、代わりにrangeRoundBandsの​​を使用することができます。

var xscale = d3.scale.ordinal() 
    .domain(data.map(function(d) {return d.quarter})) 
    .rangePoints([0,width]); 

ここ

は作業フィドルです：https://jsfiddle.net/6d7wqeyh/

あなたが値を取得していることがわかりますトリミングされた。しかし、私はあなたがその考えを得ると思う。