D3.js D3 v4条形图X轴带负值

我用这个例子绘制了一个带有负值和正值的条形图，但我无法正确设置负x轴。有人能告诉我我的错误是什么吗

var margin = {top: 30, right: 10, bottom: 50, left: 50},
    width = $('.col-lg-12').width(),
    height = 420;

// Add svg to
var svg = d3.select('#id').append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom).append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

// set the ranges
var y = d3.scaleBand()
    .range([height, 0])
    .padding(0.1);

var x = d3.scaleLinear()
    .range([0, width]);

// Scale the range of the data in the domains
x.domain([0, d3.max(data, function (d) {
    return Math.abs(d.value);
})]);
y.domain(data.map(function (d) {
    return d.dataset;
}));

// append the rectangles for the bar chart
svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", function (d) {
        return "bar bar--" + (d.value < 0 ? "negative" : "positive");
    })
    .attr("x", function (d) {
        return x(Math.min(0, d.value));
    })
    .attr("y", function (d) {
        return y(d.dataset);
    })
    .attr("width", function (d) {
        return Math.abs(x(d.value) - x(0));
    })
    .attr("height", y.bandwidth());

// add the x Axis
svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

// add the y Axis
svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + x(0) + ",0)")
    .call(d3.axisRight(y));

var margin={top:30，right:10，bottom:50，left:50}，
宽度=$（'.col-lg-12'）。宽度（），
高度=420；
//将svg添加到
var svg=d3.select（'#id'）.append（'svg'）.attr（'width'，width+margin.left+margin.right.）.attr（'height'，height+margin.top+margin.bottom.）.append（'g'）.attr（'transform'，'translate（'+margin.left+'，'+margin.top+'））；
//设定范围
变量y=d3.scaleBand（）
.范围（[高度，0]）
.填充（0.1）；
var x=d3.scaleLinear（）
.范围（[0，宽度]）；
//缩放域中数据的范围
x、 域（[0，d3.max（数据，函数（d））{
返回Math.abs（d.value）；
})]);
y、 域（data.map）（函数（d）{
返回d.dataset；
}));
//为条形图添加矩形
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”，函数（d）{
返回“条-条-”+（d.值<0？“负”：“正”）；
})
.attr（“x”，函数（d）{
返回x（数学最小值（0，d值））；
})
.attr（“y”，函数（d）{
返回y（d.dataset）；
})
.attr（“宽度”，函数（d）{
返回数学值abs（x（d.value）-x（0））；
})
.attr（“高度”，y.带宽（））；
//添加x轴
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加y轴
svg.append（“g”）
.attr（“类”、“y轴”）
.attr（“转换”、“平移”（+x（0）+”，0）
.call（d3.axisRight（y））；

---

问题只是x域。因为您有负值，而不是：

x.domain([0, d3.max(data, function (d) {
    return Math.abs(d.value);
})]);

应该是：

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

下面是一个使用您的代码和假数据的演示：

var margin={top:30，right:10，bottom:50，left:50}，
宽度=500，
高度=300；
var data=[{value:10，数据集：“barbaz”}，
{value:40，数据集：“barbar”}，
{value:-10，数据集：“foobaz”}，
{value:50，数据集：“foobar”}，
{value:30，数据集：“baz”}，
{value:-20，数据集：“bar”}，
{值：70，数据集：“foo”}]；
//将svg添加到
var svg=d3.select（'body'）。append（'svg'）。attr（'width'，width+margin.left+margin.right）。attr（'height'，height+margin.top+margin.bottom）。append（'g'）。attr（'transform'，'translate（'+margin.left+'，'+margin.top+'）））；
//设定范围
变量y=d3.scaleBand（）
.范围（[高度，0]）
.填充（0.1）；
var x=d3.scaleLinear（）
.范围（[0，宽度]）；
//缩放域中数据的范围
x、 域（d3）。范围（数据，函数（d）{
返回d值；
}));
y、 域（data.map）（函数（d）{
返回d.dataset；
}));
//为条形图添加矩形
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”，函数（d）{
返回“条-条-”+（d.值<0？“负”：“正”）；
})
.attr（“x”，函数（d）{
返回x（数学最小值（0，d值））；
})
.attr（“y”，函数（d）{
返回y（d.dataset）；
})
.attr（“宽度”，函数（d）{
返回数学值abs（x（d.value）-x（0））；
})
.attr（“高度”，y.带宽（））；
//添加x轴
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加y轴
svg.append（“g”）
.attr（“类”、“y轴”）
.attr（“转换”、“平移”（+x（0）+”，0）
.call（d3.axisRight（y））
.bar——正{
填充：钢蓝；
}
.bar--负数{
填充物：达克朗；
}
谢谢你的回答，但我还是有同样的问题。我不知道为什么，但我认为它必须处理我提供的数据。正如您在示例中看到的，负数介于0和-1之间。可能是这样吗？只需根据数据中的最小值设置x域的最小值。您可以在我的演示中看到它是有效的。@ddomingo另外，显示数据（只有几行，以及最小值）也是一个好主意。信息越多越好。