以下是指向d3 js图的链接。如何更改此d3.js图
http://enjalot.com/inlet/4131006/
这里是代码
var w = 300,
h = 300,
padding = 31,
p = 10;
var data = [{count:200,year:2008},
{count:240,year:2010},
{count:290,year:2009}];
var bar_height = d3.scale.linear()
.domain(d3.extent(data, function(d) { return d.count; })) // min max of count
.range([p,h-p]); // min max of area to plot in
var bar_xpos = d3.scale.linear()
.domain(d3.extent(data, function(d) { return d.year; })) // min max of year
.range([p,w-p]); // min max of area to plot in
var xAxis = d3.svg.axis()
.scale(bar_xpos)
.orient("bottom")
.ticks(5); //Set rough # of ticks
var yAxis = d3.svg.axis()
.scale(bar_height)
.orient("left")
.ticks(5);
var svg = d3.select("svg")
.attr("width", w)
.attr("height", h);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
svg.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("x", function(d) {
return bar_xpos(d.year); })
.attr("y", function(d) {
return h - bar_height(d.count); })
.attr("width", 10)
.attr("height", function(d) {return bar_height(d.count); })
.attr("fill", "steelblue")
我已经能够绘制Y轴和X轴这个图,但他们不看correct.There一些问题 矩形线不在X轴上。 图形上的x轴和y轴上没有0,它以json数据中的最小值开始,并以任何方式配置轴上两个标记之间的距离。
但现在的图表显示错误data.For 2008年计数是200,但它显示小于100,同样也等你 – iJade
是正确的。我的错。我已经更新了解决此问题的答案。 – rosshamish
@jade是否为您工作? – rosshamish