Question

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

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

但不是在X轴上有A，B，C等，而是在几天（2017年1月16日，2017年1月17日等），在Z轴上，我需要一段时间。 Max将是24小时。我实际上每天都有json格式的数据，以秒为单位。

a = input('var name?')
exec(a)

任何提示？

Answer 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>

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

1 个答案: