渲染D3.js面积图中的问题

时间:2016-06-12 10:40:28

标签: javascript d3.js charts

我指的是这里的文章http://bl.ocks.org/mbostock/3883195我已经更换了自己的数据集,但得到了一个矩形而不是区域图,我错过了一些东西但却无法解决问题我的小提琴居住在这里{ {3}}

var area = d3.svg.area()
 .x(function(d) { return x(d.stamp); })
 .y0(height)
 .y1(function(d) { return y(d.loc_total); });

请帮忙

1 个答案:

答案 0 :(得分:1)

图表工作正常。实际上它没有显示精确的矩形,但是渐变太小而无法看到。区域图表看起来像一个矩形的原因是因为这是您传入的数据所创建的内容:

在2015年12月10日星期四,您有9个数据点在几个小时内分布。最后一个点是9944.您剩余的3个数据点将在接下来的4个月内分布,但'loc_total'几乎没有变化: 9944,9952,9948,9952。

所以你早期的'loc_total'有变化,但是时间刻度太短(4个月中的几个小时)才能在图表中看到这一点。然后,您在时间序列中分布了一些数据点,但“loc_total”的变化不足。

如果您更改了几个数字,当我更改几个'loc_total'值时,您可以看到它正常工作:

var data =[{
    "hash": "de4d2c909ec9e00106a147c81f13d2395aaa1d11",
    "stamp": "Mon Apr 18 16:12:52 UTC 2016",
    "loc_total": 9952
  },
  {
    "hash": "a3957595e859e5bf7ce4d50b9ef1f65afc2cbcb9",
    "stamp": "Mon Feb 15 13:52:37 UTC 2016",
    "loc_total": 6948
  },
  {
    "hash": "f8c8a2eecb4d90b4700313294b5cf32c5cd1fe1c",
    "stamp": "Mon Feb 15 09:38:41 UTC 2016",
    "loc_total": 9952
  },
  {
    "hash": "7405846a24596c8fdcadec8be1f392783d1517fc",
    "stamp": "Thu Dec 10 16:30:12 UTC 2015",
    "loc_total": 7944
  }
...

请参阅:https://jsfiddle.net/henbox/9ep4Lnbq/1/