d3 js双向水平条形图

Question

我正在尝试使用d3绘制水平双向条形图。我从小提琴那里得到了一个样本。我已根据需要更新了它。但我最终遇到了一些问题。

请在此处找到小提琴：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)); 由于数据的最大值为26，因此无法设置刻度值31.

工作代码here

修改

如果您始终希望域名为6到30，请添加：

var x = d3.scale.linear()
            .domain([6, 30])

并删除以下这一行：

x.domain(d3.extent(data, function (d) {
                return d.value;
            })).nice();

工作代码here