使用'month-year'日期值创建带有时间轴的D3.js散点图 [英] Creating a D3.js scatterplot with timeline using 'month-year' date values

问题描述

我有一个数据集，列出如下的日期：

I have a dataset that lists dates as follows:

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轴的域，将适合在我的数据集中找到的所有日期。我不确定如果我在正确的轨道，并找不到其他散点图示例使用此日期格式。

I am trying to map these dates to a time scale on the x Axis and create a simple scatterplot with D3.js. Is it possible to create a scatterplot using a dataset with date values in the format shown above? I tried to create a min date and max date for the domain of my x Axis that would fit all the dates found in my dataset. I am unsure if I'm on the right track and could not find other scatterplot examples using this date format.

我试图创建一些工作示例使用此数据集。我是新的编程，所以我感谢您的耐心和任何帮助，非常感谢。下面是我结束的示例代码的其余部分：

I am trying to create some kind of working example using this dataset. I am new to programming so I appreciate your patience and any help is greatly appreciated. Here is the rest of the sample code I ended up with:

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 - 没有工作，我建议一些代码重组， / li>
  
• 在解释数据点时，应该使用xScale（parseDate（d [0]））而不是xScale（d [0]）

这是您的修改示例的完整代码，应该工作：

Here is complete code of your modified example, that should work:

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);    

希望这有帮助。

这篇关于使用'month-year'日期值创建带有时间轴的D3.js散点图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！