如何使用 d3 制作持续时间的条形图？答案

【问题标题】：How to make a bar chart for time duration with d3?如何使用 d3 制作持续时间的条形图？
【发布时间】：2017-06-02 04:45:17
【问题描述】：

这个问题很简单，但我真的不知道该怎么做，也不知道如何格式化我的数据。

我只想制作一个像这个例子一样的简单条形图：http://bl.ocks.org/mbostock/3885304

但是在 X 轴上不是 A、B、C 等，而是几天（16/01/2017、17/01/2017 等），在 Z 轴上我想要一个持续时间。最长为 24 小时。实际上，我每天都有 json 格式的数据，以秒为值。

[
  {
    "date": "2017-01-08",
    "uptime": 40320,
  },
  {
    "date": "2017-01-09",
    "uptime": 74460,
  },
  {
    "date": "2017-01-10",
    "uptime": 73500,
  },
  {
    "date": "2017-01-11",
    "uptime": 83640,
  },
  {
    "date": "2017-01-12",
    "uptime": 68520,
  }
]

有什么提示吗？

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

您的数据格式正确。只需换掉链接示例中的变量名即可； date 代表 letter 和 uptime 代表 frequency。最后，由于您的数据已经在 JSON 中，您可以内联到 <script> 标签：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .bar {
    fill: steelblue;
  }
  
  .bar:hover {
    fill: brown;
  }
  
  .axis--x path {
    display: none;
  }
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
  var svg = d3.select("svg"),
    margin = {
      top: 20,
      right: 20,
      bottom: 30,
      left: 40
    },
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

  var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);

  var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var data = [{
    "date": "2017-01-08",
    "uptime": 40320,
  }, {
    "date": "2017-01-09",
    "uptime": 74460,
  }, {
    "date": "2017-01-10",
    "uptime": 73500,
  }, {
    "date": "2017-01-11",
    "uptime": 83640,
  }, {
    "date": "2017-01-12",
    "uptime": 68520,
  }]

  data.forEach(function(d){
    d.uptime = d.uptime / 3600;
  });

  x.domain(data.map(function(d) {
    return d.date;
  }));
  y.domain([0, d3.max(data, function(d) {
    return d.uptime;
  })]);

  g.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  g.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y))
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.71em")
    .attr("text-anchor", "end")
    .text("Frequency");

  g.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) {
      return x(d.date);
    })
    .attr("y", function(d) {
      return y(d.uptime);
    })
    .attr("width", x.bandwidth())
    .attr("height", function(d) {
      return height - y(d.uptime);
    });
</script>

【讨论】：

太棒了，谢谢。有没有办法将 Y 轴刻度设为小时而不是秒？
@ArnaudJanssens，预处理数据并除以 3600，查看更新后的答案。
非常感谢 Mark，我在 Y 轴上显示实际的 Date 对象时走错路了。