Question

我有一个条形图，我想让我的图表中的第6个和条形以及我的图表中的第12个和第13个条形之间的间隙更加明显。现在我正在使用.rangeRoundBands导致偶数填充，并且似乎没有办法覆盖特定矩形的那些（我尝试将填充和边距附加到该特定矩形但没有成功）。

Here's a jsfiddle of the graph

我自己生成乐队和小节的代码：

    var yScale = d3.scale.ordinal()
                    .domain(d3.range(dataset.length))
                    .rangeRoundBands([padding, h- padding], 0.05);

    svg.selectAll("rect.bars")
                .data(dataset)
                .enter()
                .append("rect")
                .attr("class", "bars")
                .attr("x", 0 + padding)
                .attr("y", function(d, i){
                    return yScale(i);
                })
                .attr("width", function(d) {
                    return xScale(d.values[0]);
                })
                .attr("height", yScale.rangeBand())

Answer 1

您可以提供基于数据和索引计算高度的函数。也就是说，你可以使用像

这样的东西

.attr("height", function(d,i) {
            if(i == 5) {
                return 5;
            }
            return yScale.rangeBand();
        })

使第6个条高5像素。您当然可以将此值基于yScale.rangeBand()，即减去某个数字以使差距更大。

改变D3条形图中特定条形之间的间隙

1 个答案: