d3.js scale doesn't place tick at the top

筅森魡賤 提交于 2019-12-24 14:05:14

问题


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.

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

回答1:


Take a look at the .nice function

https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-linear_nice



来源:https://stackoverflow.com/questions/19138911/d3-js-scale-doesnt-place-tick-at-the-top

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!