javascript - 为什么最后一个刻度没有值-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(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)');

这是我的live demo。

最佳答案

这可以通过使用axis.tickValues()覆盖用于确定报价值的默认行为来完成：

var yAxis = d3.svg.axis().scale(yAxisScale).orient("left")
  .tickValues(yAxisScale.ticks().concat(yAxisScale.domain()));

这仍然通过调用yAxisScale.ticks()来依靠自动生成的刻度值，这是D3轴的默认行为。然后，这些值将补充数据值的外部边界，即yAxisScale.ticks()返回的数组。仅设置上限，如果足以指定yAxisScale.domain()[1]，尽管在​​提供给.tickValues()的数组中包含重复值不会有任何问题。

这样做可以使您摆脱任何滴答值的硬编码。

看一下这个工作示例：

var padding = 70;

    	//Width and height
    	var containerWidth = 1000;
    	var containerHeight = 500;
    	var data = [{
    	  "x": 82,
    	  "y": 1730
    	}, {
    	  "x": 533,
    	  "y": 16385
    	}, {
    	  "x": 41,
    	  "y": 783
    	}, {
    	  "x": 20.5,
    	  "y": 5873
    	}, {
    	  "x": 553.5,
    	  "y": 25200
    	}, {
    	  "x": 61.5,
    	  "y": 30000
    	}, {
    	  "x": 184.5,
    	  "y": 2853
    	}, {
    	  "x": 1476,
    	  "y": 83775
    	}];
    	//Create scale functions
			var xScale = d3.scale.linear()


    	var chartContainer = d3.select("body")
    	  .append("svg")
    	  .attr("class", "chartContainer")
    	  .attr("width", containerWidth)
    	  .attr("height", containerHeight);

    	$(".chartContainer").css({
    	  "background-color": "",
    	  "position": "absolute",
    	  "top": 50,
    	  "left": 15
    	});


    	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")
    	  .tickValues(xAxisScale.ticks().concat(xAxisScale.domain()));

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

xGuide.selectAll('path')
	  		.style({ fill: 'none', stroke: "#000"});
	  	xGuide.selectAll('line')
	  		.style({ stroke: "#000"});
    	/* 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")
    	  .tickValues(yAxisScale.ticks().concat(yAxisScale.domain()[1]));

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

    	chartContainer.selectAll("circle")
    	  .data(data)
    	  .enter()
    	  .append("circle")
    	  .attr("cx", function(d) {
    	    return xAxisScale(d.x);
    	  })
    	  .attr("cy", function(d) {
    	    return yAxisScale(d.y);
    	  })
    	  .attr("r", 4)
    	  .attr("fill", "red")
    	  .attr({
    	    "z-index": "9999"
    	  });

    	  yGuide.selectAll('path')
	  		.style({ fill: 'none', stroke: "#000"});
	  	yGuide.selectAll('line')
	  		.style({ stroke: "#000"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>