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) });

您可以阅读有关序数比例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/

您可以看到值正在修剪。但我认为你明白了。

将图表的数据点排列在x轴上的刻度线上

1 个答案: