D3 不在线图上绘制数据
D3 not draw data on line graph
我正在尝试创建 d3 折线图。我遵循的教程使用它们提供的示例数据生成图表,但是当我插入数据时,图表不生成线条,x 轴也没有任何值。
我想这与 x 轴是日期/格式有关(我也可能决定只做月和年),但我花了几天时间试图弄清楚如何做,但什么也没有。
Here is a jsfiddle 重现问题。生成一行的教程数据被注释掉了。我的数据存储在数据变量中。
知道发生了什么事吗?
var data = [{
"date":"January 1, 2008","total":'33'},
{"date":"February 1, 2008","total":'40'},
{"date":"March 1, 2008","total":'46'},
{"date":"April 1, 2008","total":'281'},
{"date":"May 1, 2008","total":'354'},
{"date":"June 1, 2008","total":'620'},
{"date":"July 1, 2008","total":'368'},
{"date":"August 1, 2008","total":'323'}];
var chart = d3.select('#chartCanvas'),
WIDTH=1000,
HEIGHT=500,
MARGINS= {
top:20,
right: 20,
bottom: 20,
left: 50
};
//THIS DOES NOT WORK
// var parseDate = d3.time.format("%d-%b-%y").parse;
// data.forEach(function(d) {
// d.date = Date(parseDate(d.date))
//});
xScale = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right]).domain(d3.extent(data, function(d) { return d.date; }));
yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([1, d3.max(data, function(d) { return d.total; })]);
xAxis = d3.svg.axis()
.scale(xScale),
yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
chart.append("svg:g")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);
chart.append("svg:g")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
var lineGen = d3.svg.line()
.x(function(d) {
return xScale(d.date);
})
.y(function(d) {
return yScale(d.total);
});
chart.append('svg:path')
.attr('d', lineGen(data))
.attr('stroke', 'green')
.attr('stroke-width', 2)
.attr('fill', 'none');
日期是字符串,但 D3 需要某种数字(日期也是)。通过将代码中两次出现的 d.date
更改为 new Date(d.date)
,它可以工作:http://jsfiddle.net/mmpe5hj1/1/
// THIS DATA SET PRODUCES LINES
/*
var data = [{
"total": "202",
"date": "2000"
}, {
"total": "215",
"date": "2001"
}, {
"total": "179",
"date": "2002"
}, {
"total": "199",
"date": "2003"
}, {
"total": "134",
"date": "2003"
}, {
"total": "176",
"date": "2010"
}];
*/
//THIS DATA SET DOES NOT PRODUCE LINES OR X AXIS LABELS
var data = [{
"date":"January 1, 2008","total":'33'},
{"date":"February 1, 2008","total":'40'},
{"date":"March 1, 2008","total":'46'},
{"date":"April 1, 2008","total":'281'},
{"date":"May 1, 2008","total":'354'},
{"date":"June 1, 2008","total":'620'},
{"date":"July 1, 2008","total":'368'},
{"date":"August 1, 2008","total":'323'}];
var chart = d3.select('#chartCanvas'),
WIDTH=1000,
HEIGHT=500,
MARGINS= {
top:20,
right: 20,
bottom: 20,
left: 50
};
//THIS DOES NOT WORK
// var parseDate = d3.time.format("%d-%b-%y").parse;
// data.forEach(function(d) {
// d.date = Date(parseDate(d.date))
//});
xScale = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right]).domain(d3.extent(data, function(d) { return new Date(d.date); }));
yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([1, d3.max(data, function(d) { return d.total; })]);
xAxis = d3.svg.axis()
.scale(xScale),
yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
chart.append("svg:g")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);
chart.append("svg:g")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
var lineGen = d3.svg.line()
.x(function(d) {
return xScale(new Date(d.date));
})
.y(function(d) {
return yScale(d.total);
});
chart.append('svg:path')
.attr('d', lineGen(data))
.attr('stroke', 'green')
.attr('stroke-width', 2)
.attr('fill', 'none');
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="main_content">
<div class="chart">
<!--Create SVG canvas -->
<svg id="chartCanvas" width="1000" height="500">
</svg>
</div>
</div>
我正在尝试创建 d3 折线图。我遵循的教程使用它们提供的示例数据生成图表,但是当我插入数据时,图表不生成线条,x 轴也没有任何值。
我想这与 x 轴是日期/格式有关(我也可能决定只做月和年),但我花了几天时间试图弄清楚如何做,但什么也没有。
Here is a jsfiddle 重现问题。生成一行的教程数据被注释掉了。我的数据存储在数据变量中。
知道发生了什么事吗?
var data = [{
"date":"January 1, 2008","total":'33'},
{"date":"February 1, 2008","total":'40'},
{"date":"March 1, 2008","total":'46'},
{"date":"April 1, 2008","total":'281'},
{"date":"May 1, 2008","total":'354'},
{"date":"June 1, 2008","total":'620'},
{"date":"July 1, 2008","total":'368'},
{"date":"August 1, 2008","total":'323'}];
var chart = d3.select('#chartCanvas'),
WIDTH=1000,
HEIGHT=500,
MARGINS= {
top:20,
right: 20,
bottom: 20,
left: 50
};
//THIS DOES NOT WORK
// var parseDate = d3.time.format("%d-%b-%y").parse;
// data.forEach(function(d) {
// d.date = Date(parseDate(d.date))
//});
xScale = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right]).domain(d3.extent(data, function(d) { return d.date; }));
yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([1, d3.max(data, function(d) { return d.total; })]);
xAxis = d3.svg.axis()
.scale(xScale),
yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
chart.append("svg:g")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);
chart.append("svg:g")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
var lineGen = d3.svg.line()
.x(function(d) {
return xScale(d.date);
})
.y(function(d) {
return yScale(d.total);
});
chart.append('svg:path')
.attr('d', lineGen(data))
.attr('stroke', 'green')
.attr('stroke-width', 2)
.attr('fill', 'none');
日期是字符串,但 D3 需要某种数字(日期也是)。通过将代码中两次出现的 d.date
更改为 new Date(d.date)
,它可以工作:http://jsfiddle.net/mmpe5hj1/1/
// THIS DATA SET PRODUCES LINES
/*
var data = [{
"total": "202",
"date": "2000"
}, {
"total": "215",
"date": "2001"
}, {
"total": "179",
"date": "2002"
}, {
"total": "199",
"date": "2003"
}, {
"total": "134",
"date": "2003"
}, {
"total": "176",
"date": "2010"
}];
*/
//THIS DATA SET DOES NOT PRODUCE LINES OR X AXIS LABELS
var data = [{
"date":"January 1, 2008","total":'33'},
{"date":"February 1, 2008","total":'40'},
{"date":"March 1, 2008","total":'46'},
{"date":"April 1, 2008","total":'281'},
{"date":"May 1, 2008","total":'354'},
{"date":"June 1, 2008","total":'620'},
{"date":"July 1, 2008","total":'368'},
{"date":"August 1, 2008","total":'323'}];
var chart = d3.select('#chartCanvas'),
WIDTH=1000,
HEIGHT=500,
MARGINS= {
top:20,
right: 20,
bottom: 20,
left: 50
};
//THIS DOES NOT WORK
// var parseDate = d3.time.format("%d-%b-%y").parse;
// data.forEach(function(d) {
// d.date = Date(parseDate(d.date))
//});
xScale = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right]).domain(d3.extent(data, function(d) { return new Date(d.date); }));
yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([1, d3.max(data, function(d) { return d.total; })]);
xAxis = d3.svg.axis()
.scale(xScale),
yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
chart.append("svg:g")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);
chart.append("svg:g")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
var lineGen = d3.svg.line()
.x(function(d) {
return xScale(new Date(d.date));
})
.y(function(d) {
return yScale(d.total);
});
chart.append('svg:path')
.attr('d', lineGen(data))
.attr('stroke', 'green')
.attr('stroke-width', 2)
.attr('fill', 'none');
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="main_content">
<div class="chart">
<!--Create SVG canvas -->
<svg id="chartCanvas" width="1000" height="500">
</svg>
</div>
</div>