D3.js d3 svg条形图值超过y轴

我正在看D3SVG条形图上的一个示例（示例取自修改数据）

var tsv=“字母频率\n”+
“django 12\n”+
“字典33\n”+
“C 55\n”+
“D 100\n”+
“E 90\n”+
“F 320\n”+
“G80\n”+
“H10\n”+
“I 0\n”+
“J 0”；
var margin1={top:40，right:20，bottom:30，left:40}，
宽度1=460/-margin.left-margin.right，
高度1=200/-margin.top-margin.bottom；
var formatPercent1=d3.format（“”）；
var x1=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度1]，0）；
//.rangeRoundBands（[width1,0]；
变量y1=d3.scale.linear（）
.范围（[高度1,0]）；
var xAxis1=d3.svg.axis（）
.刻度（x1）
.东方（“底部”）；
var yAxis1=d3.svg.axis（）
.比例（y1）
.东方（“左”）
.1格式（formatPercent1）；
var svg1=d3.选择（#Bar1”）.追加（“svg”）
.attr（“宽度”，宽度1+margin1.left+margin1.right）
.attr（“高度”，高度1+margin1.top+margin1.bottom）
.附加（“g”）
.attr（“transform”、“translate”（+margin1.left+）、“+margin1.top+”）；
var data1=d3.tsv.parse（tsv，类型）
域（data1.map（函数（d）{返回d.letter；}））；
y1.域（[0，d3.max（data1，函数（d）{返回d.frequency；}）]）；
svg1.附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度1+”）
.call（xAxis1）；
svg1.附加（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis1）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“频率”）；
svg1.选择全部（“.bar”）
.数据（数据1）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{返回x1（d字母）；}）
.attr（“宽度”，x1.rangeBand（））
.attr（“y”，函数（d）{返回y1（d.frequency）；}）
.attr（“高度”，函数（d）{返回高度1-y1（d.频率）；}）
功能类型（d）{
d、 频率=+d.频率；
返回d；
}

以上代码的输出如下图所示

如果我们观察由“F 320\n”表示的条，则其超过y轴值（其中y轴上的最大值为300）

---

有人能告诉我是否有可能在y轴上显示320，以便在不超过y轴最大值的情况下显示由“F”表示的条形图吗？

您可以在最大值处为轴添加特定的勾号

// Get ticks
var ticks = y1.ticks();

// Add a tick at y max
ticks.push(d3.max(data1, function(d) { return d.frequency; }));

// Add all ticks to the y axis
var yAxis1 = d3.svg.axis()
    .scale(y1)
    .orient("left")
    .tickFormat(formatPercent1)
    .tickValues(ticks);

也可以手动设置所有刻度：

// Add custom ticks to the y axis
var yAxis1 = d3.svg.axis()
    .scale(y1)
    .orient("left")
    .tickFormat(formatPercent1)
    .tickValues([80, 160, 240, 320]);

---

将

.nice（）

添加到刻度？…其中y轴上的最大值为300“。这是不正确的。

300

是轴上的最后一个数字。最大值是最后一个勾号，刚好在

300

上方。该条没有超过y轴。如果要创建填充，只需更改域中的最后一个值。是的。y轴上的最后一个值是300。是否有方法根据设置y轴上的最后一个值数据中的最大值是多少？@RyanMorton，让我检查一下。nice（）works@RyanMorton，nice（）正在舍入显示的最大值。这很好。但是有没有方法可以将最大值设置为y轴上的最后一个值？谢谢@roland。我不知道我们有一个方法。我可以使用它来实现功能。

// Add custom ticks to the y axis
var yAxis1 = d3.svg.axis()
    .scale(y1)
    .orient("left")
    .tickFormat(formatPercent1)
    .tickValues([80, 160, 240, 320]);