[英]Interactive bar chart using D3
我正在尝试在D3上绘制折线图,其中x变量是类似于2012-13的财政年度(而不是标准数据格式)。 结果,我正在考虑将x值保留为字符串。
我有以下代码用于定义行
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
然后,我读取数据,并将线添加到图表中:
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = d.date);
d.close = +d.close;
});
...
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
...
// add axes etc
});
这不起作用,并且出现以下错误:
Error: <path> attribute d: Expected number, "MNaN,190.81307074…".
这是否意味着折线图必然需要日期或数字?
数据如下:
date,close
2012-13,58.13
2013-14,53.98
2014-15,67.00
2015-16,89.70
2016-17,99.00
您没有显示的关键点是如何定义x缩放比例。 该行不在乎您的数据是什么。 比例尺确实NaN
,并且由于您获得的x值为NaN
,所以您的比例尺有些问题。
如果您使用的是时间类型刻度( https://github.com/d3/d3-scale#scaleTime ),那么可以,它必须是有效的日期时间,即unix时间戳或日期对象。 您可以使用d3.timeParse( https://github.com/d3/d3-time-format#timeParse )转换字符串日期。
如果使用序数类型刻度,例如scalePoint( https://github.com/d3/d3-scale#scalePoint ),则可以使用字符串,但必须将所有日期字符串都传递给域:
x.domain(data.map(function(d) { return d.date; }));
如果存在任何差距,这些差距也不会以序数类型的等级反映出来。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.