Question

我正在d3.js中构建区域图。

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

使用

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

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

我还希望看到开始和结束值的刻度。这可能吗？怎么样？

Answer 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>

Answer 2

这样做的一种方法是将比例域扩展为“好”，即包括将在轴上显示的“圆”值。您可以在设置域名后调用.nice()来执行此操作：

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

替代方案是明确指定刻度线，这通常会更加痛苦。

d3.js - 开始和结束时刻度

2 个答案: