D3.js 基于值显示矩形

我正在尝试根据这些值绘制矩形大小。如果值更多，我想画更大的矩形；如果值更小，我想画相对较小的矩形

我的代码：

var rect = svg.selectAll("rect")
                        .data(filtereddata)
                        .enter().append("rect")
                        .attr("id", function(d,i) { console.log(d); return d.instancegroup;  })
                        .attr("rx",3)
                        .attr("ry",3)
                        .style("fill", function(d,i) { return "#01DF01";})
                        .attr("x", function(d,i) { return i * 80; })
                        .attr("width",function (d,i){
                            if (d.value < 80)
                            {
                                return 40;
                            }
                            else
                            {
                                return d.value/4; 
                            }

                        })
                        .on("click",function(d,i) { console.log(d);})
                        .attr("y", function(d) { return 40; })
                        .attr("height", function(d) { 
                            if (d.value < 80)
                            {
                                return 15;
                            }
                            else
                            {
                                return d.value/5; 
                            }
                            })

数据：

[{"status: "Up",value: "300"},{"status: "Up",value: "200"},{"status: "Up",value: "35"}]

---

由于

x

位置是使用具有不同尺寸的先前矩形的宽度累积的，因此我会预先计算这些值，并在通过d3绑定数据数组之前将它们附加到对象：

var间距=20；
风险值数据=[
{“状态”：“向上”，值：“300”}，
{“状态”：“向上”，值：“200”}，
{“状态”：“向上”，值：“35”}
];
forEach（函数（d，i，数组）{
d、 宽度=d.值<80？40:d.值/4；
d、 高度=d值<80？15:d值/5；
d、 x=i==0？0:数组[i-1]。x+数组[i-1]。宽度+间距；
d、 y=40；
});

稍后，您可以直接访问这些属性，而无需进一步计算：

var rect = svg.selectAll("rect")
                .data(filtereddata)
                .enter().append("rect")
                    .attr({
                        "id": function (d, i) { return d.instancegroup; },
                        "rx": 3,
                        "ry": 3,
                        "x": function (d) { return d.x; },
                        "y": function (d) { return d.y; },
                        "width": function (d) { return d.width; },
                        "height": function (d) { return d.height; }
                    })
                    .on("click", function (d) {
                        console.log(d);
                    })
                    .style("fill", function (d) {
                        return "#01DF01";
                    })

---

为了帮助您修复无法正常工作的内容，您需要告诉我们您希望间距的外观。间距与所附图像类似。水平间距应均匀。矩形的大小应与值（高度和宽度）以及水平间距相对应。

var rect = svg.selectAll("rect")
                .data(filtereddata)
                .enter().append("rect")
                    .attr({
                        "id": function (d, i) { return d.instancegroup; },
                        "rx": 3,
                        "ry": 3,
                        "x": function (d) { return d.x; },
                        "y": function (d) { return d.y; },
                        "width": function (d) { return d.width; },
                        "height": function (d) { return d.height; }
                    })
                    .on("click", function (d) {
                        console.log(d);
                    })
                    .style("fill", function (d) {
                        return "#01DF01";
                    })