时间戳

首页 > 解决方案 > 条形图“日期”显示奇怪/条被按下

d3.js - 条形图“日期”显示奇怪/条被按下

问题描述

我想创建一个显示 CO2 排放的条形图。

问题（见下图）：

为什么这些条被“推”到右边？为什么 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]);

我终于建立了这些轴......</p> 

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

我还添加了矩形......</p> 

  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 版。

非常感谢！

标签： d3.jsbar-chart

解决方案

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

"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位置，只需设置适当的边距。

推荐阅读