Javascript D3条形图-如何同时显示正值/负值？

我试图在D3中创建一个可以复制的条形图。其思想是，值的范围可以从-100到100，并且彼此并排显示。刻度必须保持在0-100之间，并使用颜色指示数字是高于还是低于0

我已经设法创建了一个简单的条形图，显示正数，但一旦添加负数，图表就会中断。以下代码用于创建x轴和y轴。如果x域更改为[-100100]，则会显示负值，但这样做会以与原始设计截然不同的方式呈现图表

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

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

x.domain([0, 100])
y.domain(data.map(function(d) { return d.sentiment; }));

如果可能的话，是否有人能提供一些提示/指导来生成与所提供设计相似的图形？可以在下面的JSFIDLE中找到指向我当前图形的链接：

非常感谢。

只需使用：

以下是演示：

var数据=[{“情绪”：“结果”，“值”：28}，{“情绪”：“结果2”，“值”：-56}]
var margin={顶部：20，右侧：20，底部：50，左侧：70}，
宽度=850-边距。左侧-边距。右侧，
高度=200-margin.top-margin.bottom；
变量y=d3.scaleBand（）
.范围（[高度，0]）
.填充（0.1）；
var x=d3.scaleLinear（）
.范围（[0，宽度]）；
var svg=d3.选择（“图形”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
data.forEach（函数（d）{
d、 值=+d.值；
});
x、 域（[01100]）
y、 域（data.map（函数（d）{returnd.touction；}））；
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“宽度”，函数（d）{return x（Math.abs（d.value））；}）
.attr（“y”，函数（d）{返回y（d.d）+15；}）
.attr（“高度”，y.带宽（））
.attr（“填充”，功能（d）{
如果（d）值好的话，问这个问题
.attr("width", function(d){
    return x(Math.abs(d.value));
})