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])

然而，这将修剪区域路径的“边距”，在第一个州之前和最后一个州之后（犹他州）。这意味着，区域图表将从加利福尼亚州的蜱虫开始，并在犹他州的上方结束。

如果您不希望有第二个解决方案，这个问题很糟糕，但会保留这些“边距”：将bandwidth()添加到区域生成器中的最后一个状态：

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

值得注意的是，使用带尺，您的图表在技术上是不正确的：每个州的区域中的值不超过该状态的滴答。

D3分类区域图 - 比例问题

1 个答案: