d3.js量表不会在顶部放置勾号 [英] d3.js scale doesn't place tick at the top
问题描述
我目前正在使用一个堆叠条形图,我的轴标签有问题。标签在第一次腮红看起来很好,但我注意到,在Y轴的顶部并不总是有刻度。我已在下面粘贴了一张照片。
I am currently working on a stacked bar chart, and I'm having a problem with the axis labels. The labels look fine at first blush, but I noticed that there is not always a tick at the top of the Y axis. I've pasted a picture below.
正如您所看到的,即使有一个明显超出该值的条形,也不会有超过12万的价格。我意识到,轴是以固定的间隔创建ticks,但有没有办法强制最后一个tick值是scale的最大值?如果没有,一个更好的解决方案是,在一切都说完后,在标尺的顶部绘制一个额外的行/标签?
As you can see, there are no ticks above 120,000 even though there is a bar that clearly goes beyond that value. I realize that the axis is creating ticks at regular intervals, but is there a way to force the last tick value to be the max value of the scale? If not, would a better solution be to draw an extra line/label after everything is said and done at the top of the scale?
我的尺度和轴的代码如下:
The code for my scale and axis are below:
var max = d3.max(data, function(d) { return d.red_value + d.blue_value; } );
var labelScaleY = d3.scale.linear()
.domain([0, max])
.rangeRound([svg_height-40, 0]);
svg.append("g")
.attr("class", "y_axis")
.call(d3.svg.axis()
.scale(labelScaleY)
.orient("left"))
.attr("transform", "translate(60,20)");
svg.selectAll("line.y_rule").data(labelScaleY.ticks()).enter()
.append("line")
.attr({
"class":"y_rule",
"x1":0,
"x2":(svg_width-60),
"y1":function(d){ return labelScaleY(d);},
"y2":function(d){ return labelScaleY(d);},
"fill":"none",
"shape-rendering":"crispEdges",
"stroke":"black",
"stroke-width":"1px",
"transform":"translate(60,20)"
});
推荐答案
查看.nice函数
https:// github .com / mbostock / d3 / wiki / Quantitative-Scales#wiki-linear_nice
这篇关于d3.js量表不会在顶部放置勾号的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!