这是 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 轴,但它们看起来不正确。存在一些问题 矩形线不在 X 轴上。 图表上的 x 轴和 y 轴上没有 0。它从 json 数据中的最小值开始。并且有任何方法可以配置轴上两个标记之间的距离。
最佳答案
要配置轴,您必须修改比例。
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
d3.extent() 同时返回数据的最小值和最大值,并将其用作图表的域。因为你使用bar_height
和bar_xpos
格式化您的 scale
s,尺度的最小值也是数据中的最小值。要解决此问题,请使用 d3.max()
相反,像这样:
var bar_height = d3.scale.linear()
.domain([d3.max(data, function(d) { return d.count; }), 0] ) // min max of count
.range([p,h-p]); // min max of area to plot in
var bar_xpos = d3.scale.linear()
.domain([2000, d3.max(data, function(d) { return d.year; })] ) // min max of year
.range([p,w-p]); // min max of area to plot in
您可以使用 0 作为 bar_xpos 分钟,但如果您按年计算则没有意义,因为您的数据将无法实际读取。我这里用的是 2000 分钟。
工作示例 here .
此外,在本示例中,我格式化了条形位置,以便与轴更好地对齐。我替换了.attr('width', 10)
与 .attr('width', barwidth)
,并减去barwidth
来自x
属性也是如此。这将使条形的右边缘与轴的右边缘对齐,而不是溢出边缘。
编辑:
修改了y
和height
属性。高度则相反,否则位于图表下方。链接已更新。
.attr("y", function(d) {
return bar_height(d.count); })
.attr("width", barwidth)
.attr("height", function(d) {return h - bar_height(d.count) - padding; })
关于javascript - 如何更改此 d3.js 图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13513104/