我正在尝试使用 d3 绘制水平双向条形图。我从 fiddle 中得到了一个样本。我已经根据需要更新了它。但我最终遇到了一些问题。
请在这里找到 fiddle :https://jsfiddle.net/binuabraham/9c3rsrk6/1/
我的图表中始终需要 6 - 30 之间的刻度。但是,当我更改值时,x 轴会中断:
var xAxis = d3.svg.axis()
.scale(x)
.tickValues(d3.range(6, 31, 2));
刻度之间的差距也会随着值的变化而变化。有人可以帮我吗?
最佳答案
问题是您首先将 x 域设置为
var x = d3.scale.linear()
.domain([6, 30])
从 6 到 30
然后你根据数据像这样设置域
x.domain(d3.extent(data, function (d) {
return d.value;
})).nice();
所以修复方法是执行一次上述操作之一。
并删除刻度值 .tickValues(d3.range(6, 31, 2));
您不能将刻度值设置为 31,因为您的数据最多为 26。
工作代码here
编辑
如果您始终希望域为 6 到 30,则添加:
var x = d3.scale.linear()
.domain([6, 30])
并删除下面这一行:
x.domain(d3.extent(data, function (d) {
return d.value;
})).nice();
工作代码here
关于javascript - d3 js 双向水平条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47493741/