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

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

1 个答案: