Javascript D3分类面积图-比例问题

我正试图为美国各州的统计数据创建一个区域图。我对每个州都有一个单一的数字统计；我的数据列表中的一个元素如下所示：

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

目前，我的面积图看起来像。任务基本完成了，但您可能会注意到最后一个类别（在本例中为犹他州）没有填充。我不太清楚该怎么解决这个问题

我使用的是缩放轴；这感觉很合适。也许这不是正确的方法。以下是图表后面的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));
});

---

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

与您的问题标题（现已编辑）相反，面积图并没有“遗漏最后一个数据点”

你所看到的是预期的结果，因为你使用的是波段刻度。实际上，该值正好位于水平轴上方（就在面积图的“边缘”）就是它的值！试着用这样的解释来理解它：想象一个包含数据的条形图。当然，每个条都有一个给定的宽度。现在，绘制一条从一个条的左上角到下一条条条的左上角的路径，从第一条开始，当到达最后一条时，从左上角到轴。这就是你现在拥有的领域

这里有两种解决方案。第一种是使用点比例：

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

但是，这将在第一个州之前和最后一个州（犹他州）之后修剪区域路径的“边距”。这就是说，面积图将从加利福尼亚勾号开始，到犹他勾号结束

如果您不希望有第二种解决方案，这是一种不成熟的解决方案，但会保留这些“边距”：将

bandwidth（）

添加到区域生成器中的最后一个状态：

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

---

值得注意的是，使用波段刻度，你的图表在技术上是不正确的：每个州的区域值都没有超过该州的刻度

与您的问题标题（现已编辑）相反，面积图并没有“遗漏最后一个数据点”

你所看到的是预期的结果，因为你使用的是波段刻度。实际上，该值正好位于水平轴上方（就在面积图的“边缘”）就是它的值！试着用这样的解释来理解它：想象一个包含数据的条形图。当然，每个条都有一个给定的宽度。现在，绘制一条从一个条的左上角到下一条条条的左上角的路径，从第一条开始，当到达最后一条时，从左上角到轴。这就是你现在拥有的领域

这里有两种解决方案。第一种是使用点比例：

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

但是，这将在第一个州之前和最后一个州（犹他州）之后修剪区域路径的“边距”。这就是说，面积图将从加利福尼亚勾号开始，到犹他勾号结束

如果您不希望有第二种解决方案，这是一种不成熟的解决方案，但会保留这些“边距”：将

bandwidth（）

添加到区域生成器中的最后一个状态：

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

---

值得注意的是，使用波段刻度，你的图表在技术上是不正确的：每个州的区域值都没有超过该州的刻度

你也能分享你的数据吗？犹他州的数据可能是0？@Cyril所有州都有非零计数；犹他州是1866年。你能分享你的数据吗…犹他州的数据可能是0吗？@Cyril所有州都有非零计数；犹他州是1866年。谢谢你对当时发生的事情的精彩解释！最后一句话你说的绝对正确；在这种情况下，积分制就是最好的选择。谢谢你对所发生的一切的精彩解释！最后一句话你说的绝对正确；在这种情况下，点标度是一种方法。