javascript - 将图表的数据点与 x 轴上的刻度线对齐

Question

我想构建一个折线图来表示几个月内收集的数据。我想出了下面的代码。问题是我认为该行没有正确表示数据(或者不是我想要的方式)。您会看到 path 线没有达到“4 mo”刻度，导致用户相信数据在大约 3 个半月左右结束。

我希望所有顶点(不确定正确的术语，我猜它可以称为可视化数据点)与刻度正确匹配。所以第一个数据点应该在“1 mo”之上，第二个数据点应该与“2 mo”对齐......这非常重要，最后一个数据点应该在“1 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) });

您可以阅读有关序数尺度的更多信息 here .

如果您希望 x 刻度从 0 开始，可以使用 rangePoints 而不是 rangeRoundBands:

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

这是一个工作 fiddle :https://jsfiddle.net/6d7wqeyh/

您可以看到值正在被 trim 。但我想你已经明白了。