根据值

Question

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

我的代码：

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; 
                            }
                            })

然而，矩形之间的间距不能正常工作。有没有更好的方法来解决这个问题。

我也尝试过轴，但没有工作。我对齐x轴时出错了。

var margin = {top: 20, right: 20, bottom: 70, left: 40},
            width = 600 - margin.left - margin.right,
            height = 300 - margin.top - margin.bottom;

        var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
        var y = d3.scale.linear().range([height, 0]);
 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) { 

                            if(i ==0 )
                            {
                                return 40;
                            }
                            else
                            {
                                return x(d.value) + 100 ;
                            }

                            })
                        .attr("y", function (d,i) { return  40;})
                        .attr("width", function (d,i) { return height - y(d.value);})
                        .attr("height", function (d,i) { console.log(x(d.value)); return height - y(d.value);})

数据：

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

Answer 1

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

var SPACING = 20;

var data = [
    {"status": "Up", value: "300"},
    {"status": "Up", value: "200"},
    {"status": "Up", value: "35"}
];


data.forEach(function(d, i, array) {
    d.width = d.value < 80 ? 40 : d.value / 4;
    d.height = d.value < 80 ? 15 : d.value / 5;
    d.x = i == 0 ? 0 : array[i-1].x + array[i-1].width + SPACING;
    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";
                    })