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

Question

我想构建一个折线图来表示几个月收集的数据。我想出了下面的代码。问题是我认为这条线不能正确地表示数据（或者这不是我想要的方式）。您会看到 path 行没有上升到“4 个月”刻度，导致用户相信数据在 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) });

您可以阅读有关序数音阶的更多信息here。

如果您希望 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/

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