Question

我正在使用D3和我以JSON格式存储的数据来绘制条形图。但是，所有条形图都显示在图表的左侧，因此我只能看到数据集中最高值的条形图。

以下是我的JavaScript代码的相关部分：

var x = d3.time.scale()
    .range([0, width]);

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

var parseDate = d3.time.format("%Y-%m-%d").parse;

d3.json("performance/api", function (data) {

  data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.percent_return = +d.percent_return;
  });

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

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.date); })
      .attr("width", width/data.length)
      .attr("y", function(d) { return y(d.percent_return); })
      .attr("height", function(d) { return height - y(d.percent_return); });

此外，这是我的一个数据条目的示例：

[{"percent_return": "12.00", "date": "2016-01-02T01:43:52Z"},

关于如何正确解析日期并将其绘制在x轴上的任何想法？谢谢。

Answer 1

您正在正确解析日期：

而不是

var parseDate = d3.time.format("%Y-%m-%d").parse;

使用

parseDate = d3.time.format("%Y-%m-%dT%H:%M:%SZ").parse

在d3

中阅读here的日期格式

使用JavaScript / D3在图表上展开条形图

1 个答案: