d3.js比例不会在顶部打勾

时间:2013-10-02 14:07:14

标签: javascript d3.js axis-labels

我目前正在处理堆积条形图,我遇到轴标签问题。第一次腮红时标签看起来很好,但我注意到Y轴顶部并不总是有一个勾号。我在下面贴了一张照片。

Graph showing no ticks above 120,000

正如您所看到的,即使有一个显然超出该值的条形,也没有超过120,000的标记。我意识到轴是以固定间隔创建刻度线,但有没有办法强制最后刻度值为刻度的最大值?如果没有,那么更好的解决方案是在标尺的顶部完成所有内容之后绘制额外的线/标签吗?

我的比例和轴的代码如下:

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)"
                            });

1 个答案:

答案 0 :(得分:2)