javascript - D3 分类面积图 - 比例尺问题

Question

我正在尝试为美国各州的统计数据创建面积图。我对每个州都有一个数字统计；我的数据列表中的一个元素如下所示:

{'state':'CA','count':4000}

目前，我的面积图看起来像 this .任务基本完成，但您可能会注意到最后一个类别(在本例中为 UTAH)没有填写。我不太确定如何解决这个问题。 close_up

我正在使用 scaleBand 轴；这感觉很合适。也许这不是正确的方法。这是图表背后的 JS:

var svg_area = d3.select("#area")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom),
g_area = svg_area.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleBand().range([0, width]),
    y = d3.scaleLinear().range([height, 0]);

var area = d3.area()
  .x(function(d) { return x(d.state); })
  .y0(height)
  .y1(function(d) { return y(d.count); });

d3.csv('data/states.csv', function(data) {

  data.forEach(function(d) {
    d.count = +d.count;
  });

  data.sort(function(a, b){
    return b.count-a.count;
  });

  data = data.slice(0,30);

  x.domain(data.map(function(d) { return d.state; }));
  y.domain([0, d3.max(data, function(d) { return d.count; })]);

  g_area.append('path')
      .datum(data)
      .attr('fill', solar[1])
      .attr("class", "area")
      .attr('d', area);

  g_area.append("g")
      .attr("class", "x-axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  g_area.append("g")
      .attr("class", "y-axis")
      .attr("transform", "translate(0," + 0 + ")")
      .call(d3.axisLeft(y));
});

关于如何解决这个问题有什么建议吗？感谢您的任何反馈!

Answer 1

与您的问题标题(现已编辑)相反，面积图不是“遗漏最后一个数据点”。

您看到的是预期的结果，因为您使用的是波段刻度。实际上，水平轴正上方的值(就在面积图的“边缘”)是犹他值!尝试通过以下解释来理解它:想象一下包含您的数据的条形图。当然，每个条都有给定的宽度。现在，绘制一条路径，从一个栏的左上角到下一个栏的左上角，从第一个栏开始，到最后一个栏, 从左上角向下到轴。那就是您现在拥有的区域。

这里有两种解决方案。第一个是使用点刻度代替:

var x = d3.scalePoint().range([0, width])

但是，这将 trim 区域路径的“边距”，在第一个州之前和最后一个州(犹他州)之后。这意味着，面积图将从加利福尼亚刻度线开始，到犹他州刻度线结束。

如果你不希望有第二个解决方案，它是 hacky，但会保留那些“边距”:将 bandwidth() 添加到区域生成器的最后一个状态:

var area = d3.area()
    .x(function(d, i) {
        return i === data.length - 1 ?
            x(d.state) + x.bandwidth() : x(d.state)
    })

可能值得注意的是，使用带刻度，您的图表在技术上是不正确的:每个州的区域中的值没有超过该州的刻度线。