条形图“日期”显示奇怪/条被按下

Question

我想创建一个显示二氧化碳排放量的条形图。

问题（见下图）：

为什么这些条被“推”到右边？为什么 x 轴显示的年份没有第一个整数？

我使用的是 d3 版本 3。

给定一些像这样的 JSON 数据：

     [
      {
        "Cement": 0.0,
        "Gas Flaring": 0.0,
        "Gas Fuel": 0.0,
        "Liquid Fuel": 0.0,
        "Per Capita": null,
        "Solid Fuel": 3.0,
        "Total": 3.0,
        "Year": 1751
      }, 
and so on…
]

为了准备缩放，我做了：

  var minDate = dataset[0].Year;
  var maxDate = dataset[dataset.length - 1].Year;

 var maxValue = d3.max(dataset, function(d) {
    return d["Per Capita"];
  });

我添加了 svg

var svg = d3
    .select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

我已将 xAxis 和 yAxis 分开：

  var xAxisScale = d3.time
    .scale()
    .domain([minDate, maxDate])
    .range([0, w]);

  var yAxisScale = d3.scale
    .linear()
    .domain([0, maxValue])
    .range([h, 0]);

我终于建立了这些轴……

 var xAxis = d3.svg
    .axis()
    .scale(xAxisScale)
    .orient("bottom");

  var yAxis = d3.svg
    .axis()
    .scale(yAxisScale)
    .orient("left");

  svg
    .append("g")
    .attr("class", "axis")
    .attr("transform", "translate(92," + (h - padding) + ")")
    .call(xAxis);

  svg
    .append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",-90)")
    .call(yAxis);

我还添加了矩形......

  svg
    .selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .style("fill", "teal")
    .attr({
      x: function(d, i) {
        return i * (w / dataset.length);
      },
      y: function(d) {
        return yAxisScale(d["Per Capita"]);
      },
      width: w / dataset.length,
      height: function(d) {
        return h - yAxisScale(d["Per Capita"]);
      }
    });

结果不是预期的。

您能详细说明发生了什么问题吗？

为什么这些条被“推”到右边？ 为什么 x 轴显示的年份没有第一个整数？

我使用的是 d3 版本 3。

非常感谢！

Answer 1

这里的主要问题是这个...

"Year": 1751

... 不是日期对象。那只是一个数字。如果你看看你的轴，你就会意识到这一点。

所以，你必须解析它。例如：

const format = d3.time.format("%Y");
dataset.forEach(function(d){
    d.Year = format.parse(d.Year);
});

另外，当你这样做时......

var minDate = dataset[0].Year;
var maxDate = dataset[dataset.length - 1].Year;

...您盲目地相信数组已排序。不要那样做。相反，这样做：

var minDate = d3.max(dataset, function(d){
    return d.Year
});
var maxDate = d3.min(dataset, function(d){
    return d.Year
});

或者，如果你想使用解构：

var [minDate, maxDate] = d3.extent(dataset, d => d.Year);

最后，既然您有适当的比例，请不要使用x 位置的索引。使用比例：

x: function(d) {
    return xAxisScale(d.Year);
},

这涵盖了有关x 位置的问题。要固定y 的位置，只需设置适当的边距即可。