如何在d3中有2个矩形重叠以制作进度条？

Question

我正在尝试使用 d3 制作进度条，我可以制作条形图

但我想在这样的栏下有范围重叠

这是我的 d3 代码

var my_values = [
    { name: 'London', cost: 8674000},
    { name: 'New York', cost: 8406000},
    { name: 'Sydney', cost: 4293000},
    { name: 'Paris', cost: 2244000},
    { name: 'Beijing', cost: 11510000}
];

d3.selectAll('rect')
.data(my_values)
.attr('height', 5)
.attr('width', function(d) {
    var scaleFactor = 0.00004;
    return d.cost * scaleFactor;
})
.attr('y', function(d, i) {
  return i * 20;
})

有没有办法让条形图的范围显示在每个条形下方，rect以便用户可以观察到基于条形图位置的相对百分比是多少？

编辑：

我想知道如何只创建栏，这里是省略了文本的栏

Answer 1

首先：使用比例尺根据您的数据创建条形图。使用适当的比例，这里的问题很容易解决：

使用比例域的最大值创建背景条：

.attr("width", function(d) {
    return scale(scale.domain()[1])
})

然后，在这些元素上，使用数据创建真实的条形：

.attr("width", function(d) {
    return scale(d.cost)
})

为了创建重叠给予真正的酒吧一样x，y和height背景条的属性。但是它们必须在背景之后绘制：在 SVG 中，稍后绘制的人仍然在顶部。

这是一个演示：

.attr("width", function(d) {
    return scale(scale.domain()[1])
})

.attr("width", function(d) {
    return scale(d.cost)
})

PS：如果您想删除条右侧的圆角，您有一些选择：例如，创建路径而不是条或在真实路径的顶部创建小条以覆盖圆角。问题是，在 SVG 矩形中，您不能选择哪个角是圆的：rx并ry应用于所有角。