javascript d3.js - 开始和结束刻度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21753126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
d3.js - starting and ending tick
提问by marcosh
I am building an area graph in d3.js.
我正在 d3.js 中构建面积图。
For my y axis, I want to use a linear scale that extends from the minimal value to the maximal value of the data represented in the graph.
对于我的 y 轴，我想使用一个线性刻度，该刻度从图中表示的数据的最小值延伸到最大值。
Using
使用
y = d3.scale.linear().range([height, 0]),
yAxis = d3.svg.axis().scale(y).orient("left")
d3 shows ticks only for multiples of 10000.
d3 仅显示 10000 倍数的刻度。
I would like also to see ticks for the starting and the ending value. Is this possible? How?
我还想查看起始值和结束值的刻度。这可能吗？如何？
回答by AmeliaBR
The nice()approach is usually preferable, but if you do want to have explicit tick labels at the max and min values of your data, you can force the axis to include them, along with whatever default tick values would be created by the scale:
这种nice()方法通常更可取，但如果您确实希望在数据的最大值和最小值处有明确的刻度标签，则可以强制轴包含它们，以及比例将创建的任何默认刻度值：
axis.tickValues( scale.ticks( 5 ).concat( scale.domain() ) );
scale.ticks(count)returns an array of approximately that many tick values from the scale's domain, rounded off to nice even numbers. scale.domain()returns the [min,max]domain array that you set based on the data. array.concat(array)concatenates one array onto the end of the other, and axis.tickValues(array)tells the axis to draw the ticks at those values specifically.
scale.ticks(count)从比例的域中返回一个包含大约那么多刻度值的数组，四舍五入为漂亮的偶数。 scale.domain()返回[min,max]您根据数据设置的域数组。 array.concat(array)将一个数组连接到另一个数组的末尾，并axis.tickValues(array)告诉轴专门在这些值上绘制刻度。
Live example: https://jsfiddle.net/zUj3E/671/
实例：https: //jsfiddle.net/zUj3E/671/
(function () {
//Set up SVG and axis//
var svg = d3.select("svg");
var width = window.getComputedStyle(svg[0][0])["width"];
width = parseFloat(width);
var height = window.getComputedStyle(svg[0][0])["height"];
height = parseFloat(height);
var margin = 50;
var scale = d3.scale.linear()
.domain([0.05, 0.95])
.range([0, height - 2*margin]);
var formatPercent = d3.format(".0%");
var axis = d3.svg.axis()
.scale(scale)
.orient("right")
.tickFormat(formatPercent);
axis.tickValues( scale.ticks( 5 ).concat( scale.domain() ) );
//set the axis tick values explicitly, as the array of ticks
//generated by the scale PLUS the max and min values from the scale domain
//concatenated into a single array
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + [margin, margin]+")")
.call(axis);
})();g.axis line, g.axis path {
fill:none;
stroke:royalblue;
shape-rendering:crispEdges;
}
g.axis text{
fill:royalblue;
font-family:sans-serif;
}
g.axis path {
stroke-width:2;
stroke:seagreen;
}
svg {
display: block;
width: 100vw;
height: 100vh;
}
body {
margin: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg></svg>回答by Lars Kotthoff
One way to do this is to extend the domain of a scale to be "nice", i.e. to include "round" values that will show up on the axis. You can do this by calling .nice()after setting the domain:
一种方法是将刻度的域扩展为“nice”，即包括将显示在轴上的“圆形”值。您可以通过.nice()在设置域后调用来执行此操作：
y = d3.scale.linear().range([height, 0]).domain(...).nice();
The alternative would be to specify the ticks explicitly, which is much more painful in general.
另一种方法是明确指定刻度，这通常会更痛苦。
