Javascript 为什么最后一个勾号没有'；t没有值-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)');

---

这是我的。

您正在使用d3的自动勾号生成器，它可以根据图表中的数据对如何最好地绘制轴进行最佳猜测

您有两个选项可以替代此选项：

设置要显示的刻度值的数量。例如：

var xAxis=d3.svg.axis（） .scale（xAxisScale） .orient（“底部”） .蜱（10）

传递一个tick values数组，以明确告诉d3在x轴或y轴上需要什么值；像这样：

var xAxis=d3.svg.axis（） .scale（xAxisScale） .orient（“底部”） .tick值（[01100200300400]）

如果要消除缺少值的记号（在本例中，是外部记号），只需在x轴或y轴上设置.outerTickSize（0）

---

您可能还应该阅读d3的axes API。

这可以通过覆盖默认行为来完成，以使用以下方法确定刻度值：

这仍然会通过调用

yaxiscale.ticks（）

自动生成tick值，这是D3轴的默认行为。然后用数据值的外部边界（即

yaxiscale.ticks（）

返回的数组）补充这些值。要仅设置上限，if就足以指定

yaxiscale.domain（）[1]

，尽管在提供给

.tickValues（）

的数组中有重复的值不会有什么坏处

这样做可以使您免于硬编码记号值

请看这个工作示例：

var padding=70；
//宽度和高度
var containerWidth=1000；
var容器高度=500；
风险值数据=[{
“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
}];
//创建比例函数
var xScale=d3.scale.linear（）
var chartContainer=d3.选择（“主体”）
.append（“svg”）
.attr（“类”、“图表容器”）
.attr（“宽度”，集装箱宽度）
.attr（“高度”，集装箱高度）；
$（“.chartContainer”）.css({
“背景色”：“，
“位置”：“绝对”，
“前50名”，
“左”：15
});
var xaxiscale=d3.scale.linear（）
.domain（[0，d3.max（数据，函数（d）{返回d.x；}）]）
.范围（[填充，容器宽度-填充*2]）；
var xAxis=d3.svg.axis（）.scale（xaxiscale.orient（“底部”）
.tickValues（xAxisScale.ticks（）.concat（xAxisScale.domain（））；
var xGuide=chartContainer.append（'g'）
.attr（“类”、“xAxis”）
.呼叫（xAxis）
.attr（'transform'，'translate（0'，+（containerHeight-padding）+'）；
xGuide.selectAll（'path'））
.style（{fill:'none'，stroke:#000}）；
xGuide.selectAll（'行'）
.style（{stroke:#000}）；
/*用于在图表中添加y轴的代码
* 
* */
var yaxiscale=d3.scale.linear（）
.domain（[0，d3.max（数据，函数（d）{返回d.y}）]）
.范围（[容器高度填充，填充]）；
var yAxis=d3.svg.axis（）.scale（yaxiscale.orient（“左”）
.tickValues（yAxisScale.ticks（）.concat（yAxisScale.domain（）[1]）；
var yGuide=chartContainer.append（'g'）
.attr（“类”、“亚克斯”）
.呼叫（yAxis）
.attr（'transform'，'translate（'+padding+'，0'）；
chartContainer.selectAll（“圆圈”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“cx”，功能（d）{
返回xAxisScale（d.x）；
})
.attr（“cy”，函数（d）{
返回量表（d.y）；
})
.attr（“r”，4）
.attr（“填充”、“红色”）
艾特先生({
“z索引”：“9999”
});
yGuide.selectAll（'path'））
.style（{fill:'none'，stroke:#000}）；
yGuide.selectAll（'行'）
.style（{stroke:#000}）

将
.nice（）
添加到您的第69行将解决此问题。最终结果见下图

有关更多详细信息和解释，请参阅d3比例库上的已关闭版本。mbostock于2016年12月6日对此进行了评论，并提供了解决方案


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