在前一个元素的每个 x 轴坐标位置之后附加宽度可变的元素(矩形)

Question

我想将每个矩形元素精确地附加到前一个元素 x 轴坐标之后。我当前的代码是：

var data = [50,100,150]
var svg = d3.select("#bar_chart")
.append("svg")
    .attr("width", "1000")
    .attr("height", "500")
var rect = svg.selectAll("rect")
    .data(data)
    .enter().append("rect")
        .attr("x", function(d) { return (d * i) })
        .attr("y", "300")
        .attr("width", function(d, i){ return d})
        .attr("height", function(d, i){ return d})
        .attr("fill", "blue")
        .each(function(d, i) {console.log(i.x)})

这给出了以下内容：x 轴位置设置为返回的代码 (d * i(

我想要什么：每个元素的 x 轴代码紧跟在前一个元素之后开始

提前致谢

Answer 1

您需要在当前宽度之前添加所有宽度。

https://jsfiddle.net/8dv1y74e/

var data = [50,100,150]
var svg = d3.select("#bar_chart")
.append("svg")
    .attr("width", "1000")
    .attr("height", "500")
var rect = svg.selectAll("rect")
    .data(data)
    .enter().append("rect")
        .attr("x", getPreviousWidths)
        .attr("y", "300")
        .attr("width", function(d, i){ return d})
        .attr("height", function(d, i){ return d})
        .attr("fill", "blue")
        .each(function(d, i) {console.log(i.x)})
function getPreviousWidths(d,i){
    return data.slice(0,i).reduce((memo,num)=>num+memo,0)
}

Answer 2

另一种答案的方法，您可以使用变量来跟踪最近矩形的 x 坐标，每次附加矩形时都会添加到该坐标中：

var data = [50,100,150];
var svg = d3.select("body")
.append("svg")
    .attr("width", "500")
    .attr("height", "500");
var positionX = 0; // where we are on the x axis, first element should be at 0 pixels.
var rect = svg.selectAll("rect")
    .data(data)
    .enter().append("rect")
        .attr("x", function(d) { 
                  var x = positionX;  // The x value for this rectangle
                  positionX = d + x;  // The x value for the next rectangle
                  return x;           // Return the x value for this rectangle.
         })
        .attr("y", "10")
        .attr("width", function(d, i){ return d})
        .attr("height", function(d, i){ return d})
        .attr("fill", "blue");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>