D3.js 如何切割y轴以使图表看起来更好？

我正在尝试使用D3.js（v4）创建一个条形图，它将显示2个或3个在值上有很大差异的条形图

如下图所示，黄色条的值为1596.6，而绿色条的值仅为177.2。因此，为了以优雅的方式显示图表，决定将y轴切割到某个值，该值将接近绿色条的值，并继续接近黄色条的值

在图片上，y轴在500后被切割，并在1500后继续

如何使用D3.js实现这一点

---

从技术上讲，你想要的是一个断裂的y轴

它是数据可视化中的一种有效表示（尽管有些人不赞成），只要你明确地告诉用户你的y轴断了。有几种方法可以直观地表示它，如：

但是，不要忘了在图表文本或图例中说明这一点。除此之外，请记住，“为了以优雅的方式显示图表”不应成为这里的目标：我们制作图表不是为了优雅（但如果是这样的话，这是好事），我们制作图表是为了向用户阐明信息或模式。而且，在一些非常有限的情况下，打断y轴可以更好地显示信息

回到你的问题：

如你在问题中所说，当值存在较大差异时，打断y轴非常有用。例如，看看我制作的这个简单演示：

var w=500，
h=220，
marginLeft=30，
marginBottom=30；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
风险值数据=[{
姓名:"富",，
价值：800
}, {
名称：“酒吧”，
价值：720
}, {
名称：“baz”，
数值：10
}, {
名称：“foobar”，
价值：17
}, {
名称：“foobaz”，
价值：840
}];
var xScale=d3.scaleBand（）
.domain（data.map）（函数（d）{
返回d.name
}))
.范围（[marginLeft，w]）
.填充（.5）；
var yScale=d3.scaleLinear（）
.domain（[0，d3.max（数据，函数（d））{
返回d值
})])
.范围（[h-marginBottom，0]）；
var bars=svg.selectAll（空）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“x”，函数（d）{
返回xScale（d.name）
})
.attr（“宽度”，xScale.bandwidth（））
.attr（“y”，函数（d）{
返回Y刻度（d值）
})
.attr（“高度”，功能（d）{
返回h-边缘底部-Y刻度（d值）
})
.样式（“填充”、“青色”）；
var xAxis=d3.axisBottom（xScale）（svg.append（“g”）.attr（“transform”、“translate（0）”+（h-marginBottom）+”）；
var yAxis=d3.axisLeft（yScale）（svg.append（“g”）.attr（“transform”、“translate”（+marginLeft+），0）”）
谢谢你，杰拉尔多！它就像一个符咒：）不过我还有一个问题。您可以使用tickValue设置y轴刻度，只要您事先知道值将是什么，就可以了。但是，如果您的值是动态的（例如，您从数据库中获取它们），并且无法设置您的值，该怎么办呢。你知道如何克服在断裂边缘出现的混乱吗？我假设不显示介于较低条的最大值和较高条的最小值之间的刻度值可以解决这个问题，但我不知道如何使刻度值在一定范围内不会出现。这是一个有趣的问题。但是，请不要在评论中提出问题。只需发布一个新问题，用动态域解释这个问题并链接这个答案（这样其他用户可以有更好的上下文）。是的，你是对的。这是：