將圖形的數據點與 x 軸上的刻度對齊

Question

我想構建一個折線圖來表示幾個月內收集的數據。 我想出了下面的代碼。問題是我認為這條線沒有正確代表數據（或者這不是我想要的）。 您會看到path線沒有上升到“4 mo”刻度線，導致用戶相信數據在大約 3 個半月后結束。

我希望所有的頂點（不確定正確的術語，我猜它可以稱為可視化的數據點）與刻度正確匹配。 所以第一個數據點應該在“1 mo”的頂部，第二個數據點應該與“2 mo”等對齊......這非常重要，最后一個數據點應該在圖表和第 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) });

您可以在此處閱讀有關序數比例的更多信息。

如果您希望 x-ticks 從 0 開始，您可以使用rangePoints而不是rangeRoundBands ：

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

這是一個工作小提琴： https : //jsfiddle.net/6d7wqeyh/

您可以看到這些值正在被修剪。 但我想你明白了。