我有一个列出日期的数据集,如下所示:
var dataset = [
["1-2006", 20],
["3-2009", 90],
["11-2004", 50],
["5-2012", 33],
["4-2008", 95],
["4-2004", 12],
["7-2000", 44],
["5-2006", 67],
["6-2007", 21],
["3-2001", 88]
];
我正在尝试将这些日期映射到 x 轴上的时间刻度,并使用 D3.js 创建一个简单的散点图。是否可以使用具有上述格式的日期值的数据集来创建散点图?我试图为我的 x 轴域创建一个最小日期和最大日期,以适合我的数据集中找到的所有日期。我不确定我是否在正确的轨道上,并且找不到使用这种日期格式的其他散点图示例。
我正在尝试使用此数据集创建某种工作示例。我是编程新手,所以感谢您的耐心等待,非常感谢您的帮助。这是我最终得到的示例代码的其余部分:
var w = 500;
var h = 300;
padding = 20;
var format = d3.time.format("%m-%Y"),
mindate = format(parseDate("01-2000")),
maxdate = format(parseDate("01-2015"));
var xScale = d3.time.scale()
.domain([mindate, maxdate])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function (d) {
return d[1];
})])
.range([0, h]);
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function (d) {
return yScale(d[1]);
})
.attr("r", 2);
最佳答案
您有一些小错误导致您的代码无法正常工作:
- mindate、maxdate、parseDate - 没有用,我建议对代码进行一些重组,请参阅下面的代码
- 在解释数据点时,您应该使用 xScale(parseDate(d[0])) 而不仅仅是 xScale(d[0])
这是您修改后的示例的完整代码,应该可以工作:
var w = 500;
var h = 300;
var padding = 20;
var parseDate = d3.time.format("%m-%Y").parse;
var mindate = parseDate("01-2000"),
maxdate = parseDate("01-2015");
var xScale = d3.time.scale()
.domain([mindate, maxdate])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function (d) {
return d[1];
})])
.range([0, h]);
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(parseDate(d[0]));
})
.attr("cy", function (d) {
return yScale(d[1]);
})
.attr("r", 2);
希望这对您有所帮助。
关于svg - 使用 'month-year' 日期值创建带时间线的 D3.js 散点图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20833073/