d3.js - 如何在轴中显示结束刻度值？

Question

使用d3.js v4，如何显示无法精确划分的特殊比例值？

例如:设置domain([0,24])，设置ticks(3)。值 24 未显示在轴中。

请告诉我如何显示该值。

var margin = {top: 10, right: 30, bottom: 30, left: 30},
    width = 600 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom;

var x = d3.scaleBand()
          .rangeRound([0, width])
          .domain(['A', 'B', 'C'])
          .padding(0);
var y = d3.scaleLinear()
          .domain([0, 24])
          .range([height, 0]);
var xAxis = d3.axisBottom(x),
    yAxis = d3.axisLeft(y).ticks(3);
var svg = d3.select('#chart')
          .attr('width', width + margin.left + margin.right)
          .attr('height', height + margin.top + margin.bottom)
          .style('background-color', '#ecf0f1')
          .append('g')
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var g = svg.append('g');
        g.append('g')
          .attr('class', 'axis axis--x')
          .attr('transform', 'translate(0,' + height + ')')
          .call(xAxis);
        g.append('g')
          .attr('class', 'axis axis--y')
          .call(yAxis);

<script src="https://d3js.org/d3.v4.min.js"></script>

<svg id="chart"></svg>

Answer 1

使用 tickValues，通过 scale.ticks() 定义您想要的刻度数，并通过与 scale.domain( ):

yAxis = d3.axisLeft(y)
    .tickValues(y.ticks(3).concat(y.domain()));

检查更新的代码段:

var margin = {top: 10, right: 30, bottom: 30, left: 30},
    width = 600 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom;

var x = d3.scaleBand()
          .rangeRound([0, width])
          .domain(['A', 'B', 'C'])
          .padding(0);
var y = d3.scaleLinear()
          .domain([0, 24])
          .range([height, 0]);
var xAxis = d3.axisBottom(x),
    yAxis = d3.axisLeft(y)
.tickValues(y.ticks(3).concat(y.domain()));
var svg = d3.select('#chart')
          .attr('width', width + margin.left + margin.right)
          .attr('height', height + margin.top + margin.bottom)
          .style('background-color', '#ecf0f1')
          .append('g')
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var g = svg.append('g');
        g.append('g')
          .attr('class', 'axis axis--x')
          .attr('transform', 'translate(0,' + height + ')')
          .call(xAxis);
        g.append('g')
          .attr('class', 'axis axis--y')
          .call(yAxis);

<script src="https://d3js.org/d3.v4.min.js"></script>

<svg id="chart"></svg>