Javascript D3中的Y轴标记和数据可视化
我正试图使用D3生成此图表,但我的y轴显示不正确,而且直到2014年10月,数据也无法正确显示。我现在正在使用这个例子 这是我的密码Javascript D3中的Y轴标记和数据可视化,javascript,d3.js,Javascript,D3.js,我正试图使用D3生成此图表,但我的y轴显示不正确,而且直到2014年10月,数据也无法正确显示。我现在正在使用这个例子 这是我的密码 var margin = { top : 10, right : 10, bottom : 100, left : 40
var margin = {
top : 10,
right : 10,
bottom : 100,
left : 40
}, margin2 = {
top : 430,
right : 10,
bottom : 20,
left : 40
},
width = 1006 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
height2 = 500 - margin2.top - margin2.bottom;
var parseDate = d3.time.format("%Y-%m-%d").parse; //Date should be stored in the csv file in the order yyyy-mm-dd
var x = d3.time.scale().range([ 0, width ]), x2 = d3.time
.scale().range([ 0, width ]), y = d3.scale
.linear().range([ height, 0 ]), y2 = d3.scale
.linear().range([ height2, 0 ]);
var xAxis = d3.svg.axis().scale(x).orient("bottom"), xAxis2 = d3.svg
.axis().scale(x2).orient("bottom"), yAxis = d3.svg
.axis().scale(y).orient("left");
var brush = d3.svg.brush().x(x2).on("brush", brushed);
var area = d3.svg.area().interpolate("monotone").x(
function(d) {
return x(d.Date);
}).y0(height).y1(function(d) {
return y(d.FileStored);
});
var area2 = d3.svg.area().x(function(d) {
return x2(d.Date);
}).y0(height2).y1(function(d) {
return y2(d.FileStored);
});
var svg = d3.select("div#map").append("svg").attr("width",
width + margin.left + margin.right).attr(
"height", height + margin.top + margin.bottom);
svg.append("defs").append("clipPath")
.attr("id", "clip").append("rect").attr(
"width", width).attr("height", height);
var focus = svg.append("g").attr("class", "focus")
.attr(
"transform",
"translate(" + margin.left + ","
+ margin.top + ")");
var context = svg.append("g").attr("class", "context")
.attr(
"transform",
"translate(" + margin2.left + ","
+ margin2.top + ")");
d3.csv("FilesRequestedPerMonth.csv", type, function(error,
data) {
x.domain(d3.extent(data.map(function(d) {
return d.Date;
})));
y.domain([ 0, d3.max(data.map(function(d) {
return d.FileStored;
})) ]);
x2.domain(x.domain());
y2.domain(y.domain());
focus.append("path").datum(data).attr("class",
"area").attr("d", area);
focus.append("g").attr("class", "x axis").attr(
"transform", "translate(0," + height + ")")
.call(xAxis);
focus.append("g").attr("class", "y axis").call(
yAxis);
context.append("path").datum(data).attr("class",
"area").attr("d", area2);
context.append("g").attr("class", "x axis")
.attr("transform",
"translate(0," + height2 + ")")
.call(xAxis2);
context.append("g").attr("class", "x brush").call(
brush).selectAll("rect").attr("y", -6)
.attr("height", height2 + 7);
});
function brushed() {
x.domain(brush.empty() ? x2.domain() : brush
.extent());
focus.select(".area").attr("d", area);
focus.select(".x.axis").call(xAxis);
}
function type(d) {
d.Date = parseDate(d.Date);
d.FileStored = +d.FileStored;
return d;
}
我的样本数据是
Date,FileStored
1996-01-01,31000
1996-02-01,40000
1996-03-01,46000
1996-04-01,71000
1996-05-01,67000
1996-06-01,45000
1996-07-01,51000
1996-08-01,49000
1996-09-01,59000
1996-10-01,71000
1996-11-01,62000
1996-12-01,61000
1997-01-01,70000
1997-02-01,77000
1997-03-01,77000
1997-04-01,96000
1997-05-01,70000
1997-06-01,74000
1997-07-01,64000
1997-08-01,59601
1997-09-01,63234
1997-10-01,69228
1997-11-01,75437
1997-12-01,77465
1998-01-01,74204
1998-02-01,65241
1998-03-01,72996
1998-04-01,70331
1998-05-01,77535
只有当输入数据不正确时才会出现问题。我在此处提供了不正确的数据:
实际上,您不需要对代码进行任何更改。只要提供正确的数据,这个问题就会自动得到解决。您能用JSFIDLE之类的工具设置当前代码吗?您的y轴被切断,因为您的
边距。left
对于数字来说太小了。增加到60,一切都好。谢谢,已经完成了,错误在数据文件中,也在页边空白处。
1998-05-01,77535,
1998-05-01,
1998-05-01,
1998-05-01,
1998-05-01