为什么最后一个刻度没有值-D3.js [英] why the last tick doesn't have values - D3.js

问题描述

x轴和y轴上的最后一个刻度没有旁边绘制值.我无法弄清楚为什么缺少这些值.

这是JS代码:

  var xAxisScale = d3.scale.linear().domain([0，d3.max(data，function(d){return d.x;})]).range([padding，containerWidth-padding * 2]);var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");var xGuide = chartContainer.append('g').attr("class"，"xAxis").call(x轴).attr('transform'，'translate(0，'+(containerHeight -padding)+')');/*在图表中添加y轴的代码** */var yAxisScale = d3.scale.linear().domain([0，d3.max(data，function(d){return d.y})]).range([containerHeight-padding，padding]);var yAxis = d3.svg.axis().scale(yAxisScale).orient("left");var yGuide = chartContainer.append('g').attr("class"，"yAxis").call(yAxis).attr('transform'，'translate('+ padding +'，0)'); 

这是我的

The last ticks in x-axis and y-axis don't have values drawn next to them. I cannot figure out why these values are missing.

This is the JS code :

var xAxisScale = d3.scale.linear()
         .domain([0, d3.max(data, function(d) { return d.x; })])
       .range([padding, containerWidth - padding * 2]);

    var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");

    var xGuide = chartContainer.append('g')
      .attr("class", "xAxis")
      .call(xAxis)
      .attr('transform', 'translate(0 ,' + (containerHeight -padding) + ')');


    /* Code for adding y axis in chart
     * 
     * */
    var yAxisScale = d3.scale.linear()
      .domain([0, d3.max(data, function(d){return d.y})])
      .range([containerHeight-padding, padding ]);

    var yAxis = d3.svg.axis().scale(yAxisScale).orient("left");

    var yGuide = chartContainer.append('g')
      .attr("class", "yAxis")
      .call(yAxis)
      .attr('transform', 'translate('+padding + ',0)');

This is my live demo.

解决方案

Add .nice() to line 69 of your live demo. will solve the issue. See graph below for the end result.

For more details and explanation, please refer to this closed issue on the d3-scale library. mbostock commented on it on Dec 6, 2016 and provided the solution.

这篇关于为什么最后一个刻度没有值-D3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！