>我正在尝试学习 D3,但在从数据对象数组创建简单折线图时遇到问题。
我有一个看起来像这样的数据对象数组...
[
{date: "03/04/15", rain: "1.2"},
{date: "03/05/15", rain: "2.3"},
{date: "03/06/15", rain: "0.0"},
{date: "03/07/15", rain: "4.2"},
{date: "03/08/15", rain: "0.3"},
{date: "03/09/15", rain: "0.0"}
]
我尝试按照一个简单的教程创建折线图,但是当我插入数据时,x 轴或线条都不会显示。这与日期格式有关吗?
我有一个关于JS垃圾桶的例子。
我真的不明白问题是什么,请帮忙!
X 轴应该是 d3.time.scale,由于您的 date 属性是字符串,您必须通过执行 new Date() 将其转换为正确的 Date 对象;
@Satyajit是对的。下面是一个示例:
var lineData = [
{date: "03/04/15", rain: "1.2"},
{date: "03/05/15", rain: "2.3"},
{date: "03/06/15", rain: "0.0"},
{date: "03/07/15", rain: "4.2"},
{date: "03/08/15", rain: "0.3"},
{date: "03/09/15", rain: "0.0"}
].map(function(d) {
return {
date: new Date(Date.parse(d.date)),
rain: d.rain
};
});
var vis = d3.select("#visualisation"),
WIDTH = 600,
HEIGHT = 250,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 50
},
xRange = d3.time.scale()
.range([MARGINS.left, WIDTH - MARGINS.right])
.domain([d3.min(lineData, function (d) {
return d.date;
}),
d3.max(lineData, function (d) {
return d.date;
})
]),
yRange = d3.scale.linear()
.range([HEIGHT - MARGINS.top, MARGINS.bottom])
.domain([d3.min(lineData, function (d) {
return d.rain;
}),
d3.max(lineData, function (d) {
return d.rain;
})
]),
xAxis = d3.svg.axis()
.scale(xRange)
.tickSize(3),
yAxis = d3.svg.axis()
.scale(yRange)
.tickSize(3)
.orient("left");
vis.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);
vis.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
var lineFunc = d3.svg.line()
.x(function (d) {
return xRange(d.date);
})
.y(function (d) {
return yRange(d.rain);
})
.interpolate('linear');
vis.append("svg:path")
.attr("d", lineFunc(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
<script src="http://d3js.org/d3.v3.min.js"></script>
<svg id="visualisation" width="600" height="400"></svg>