javascript - d3 js 双向水平条形图

Question

我正在尝试使用 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));

刻度之间的差距也会随着值的变化而变化。有人可以帮我吗？

Answer 1

问题是您首先将 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