d3.js - 起始和结束刻度

Question

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

对于y轴，我想使用一个线性比例尺，该比例尺从图表中表示的数据的最小值延伸到最大值。

使用：

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

d3仅显示10000的倍数刻度。

我希望也能看到起始值和结束值的刻度。这可行吗？如何实现？

- marcosh

---

你尝试过 y.nice() 吗？ - Lars Kotthoff

@LarsKotthoff 你是指在scale方法内部吗？如果是的话，没有结果... - marcosh

你可以在定义中这样做：d3.scale.linear().range([height, 0]).domain(...).nice()。但是需要在设置域之后调用.nice()。 - Lars Kotthoff

@LarsKotthoff 不完全是我想要的，但它看起来还不错，所以我很高兴！请将您的评论作为答案发布，以便我可以接受它。 - marcosh

Answer 1

优秀()方法通常更可取，但如果您确实希望在数据的最大和最小值处具有显式刻度标签，则可以强制轴包括它们以及比例尺会创建的任何默认刻度值：

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>

- AmeliaBR

---

谢谢！正是我需要的！应该接受这个答案，因为它回答了所问的问题。 - Florian Ledermann

链接已损坏。 - esengineer

@Eye Fixed。如果将来遇到类似的问题，只需将“http://fiddle.jshell.net/”更改为“https://jsfiddle.net/”，其余部分应该可以正常工作（除非它使用了一些已更改的d3语法）。 - AmeliaBR

Answer 2

一种做法是将比例尺的取值范围扩展到"好看"的数值，即包括能够在坐标轴上显示的"整数"取值。你可以在设置取值范围后调用.nice()来实现：

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

另一种选择是显式指定刻度，这通常更加繁琐。

- Lars Kotthoff

---

这非常好！ - Anna

Answer 3

巧妙的方法

在尝试这种方法之前，先尝试使用ticks、tickSize等函数。

坦白地说，我尝试了很多解决方案，但不幸的是，它们都没有对我起作用。最后，我尝试了一下CSS，并完成了工作。

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

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

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

- Balasubramani M