d3.js - 开始和结束刻度

Posted 2023-02-22

【中文标题】d3.js - 开始和结束刻度

【英文标题】：d3.js - starting and ending tick

【发布时间】：2014-03-12 06:22:30

【问题描述】：

我正在 d3.js 中构建面积图。

对于我的 y 轴，我想使用从图中表示的数据的最小值到最大值的线性刻度。

使用

y = d3.scale.linear().range([height, 0]),
yAxis = d3.svg.axis().scale(y).orient("left")

d3 仅显示 10000 的倍数的刻度。

我还想查看起始值和结束值的刻度。这可能吗？怎么样？

【问题讨论】：

你试过y.nice()吗？

@LarsKotthoff 你的意思是在 scale 方法里面吗？如果是这样，没有结果...

您可以在定义中执行此操作：d3.scale.linear().range([height, 0]).domain(...).nice()。 .nice() 需要在设置域后调用。

@LarsKotthoff 不是我想要的，但它看起来仍然不错，所以我很高兴！发表您的评论作为答案，以便我接受它

【参考方案1】：

nice() 方法通常更可取，但如果您确实希望在数据的最大值和最小值处有明确的刻度标签，您可以强制轴包含它们以及将创建的任何默认刻度值按比例：

axis.tickValues( scale.ticks( 5 ).concat( scale.domain() ) );

scale.ticks(count) 从刻度的域返回一个包含大约那么多刻度值的数组，四舍五入到漂亮的偶数。 scale.domain() 返回您根据数据设置的[min,max] 域数组。 array.concat(array) 将一个数组连接到另一个数组的末尾，axis.tickValues(array) 告诉轴专门在这些值处绘制刻度。

现场示例：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>

【讨论】：

谢谢！正是我需要的！应该是接受的答案，因为它正在回答所问的问题。

链接已损坏。

@Eye 已修复。如果您以后看到类似的问题，只需将http://fiddle.jshell.net/ 更改为https://jsfiddle.net/ 其余的应该可以工作（除非它使用一些已经更改的 d3 语法）。

【参考方案2】：

做到这一点的一种方法是将比例的域扩展为“nice”，即包含将显示在轴上的“round”值。您可以在设置域后调用.nice() 来完成此操作：

y = d3.scale.linear().range([height, 0]).domain(...).nice();

另一种方法是明确指定刻度，这通常会更痛苦。

【讨论】：

这很好！

【参考方案3】：

套路

在尝试这种方法之前，只需尝试使用 ticks、tickSize 等函数一次。

坦率地说，我经历了很多解决方案，但不幸的是，没有一个对我有用。最后，我使用了 CSS 并完成了工作。

隐藏第一个和最后一个刻度值之间的中间元素。

// displaying only first and last x-axis tick.
#x-axis 
  .tick 
    display: none 

    &:first-child,
    &:last-of-type 
      display: block;