d3，js在所有負值上設置水平條形圖上的X和Y域

Question

如何爲水平d3條形圖設置x和y域，所有負值爲？對於所有正值條形圖域將是：

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

對於正值和負值條形圖，該領域將是：

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

y.domain(data.map(function (d) { 
    return d.dataset; 
})); 

但還沒當條形圖具有所有負值時，能夠得到正確結果。

謝謝您的考慮。

Answer 1

您的邊距不當，以及其他一些事情。

https://jsfiddle.net/fmr1x1gu/7/

var margin = {top: 30, right: 10, bottom: 50, left: 50}, 
    width = 500 - margin.left - margin.right, 
    height = 300 - margin.top - margin.bottom; 

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 width - x(d.value); 
    }) 
    .attr("y", function (d) { 
     return y(d.dataset); 
    }) 
    .attr("width", function (d) { 
     return x(d.value); 
    }) 
    .attr("height", y.bandwidth());