如何在d3中使两个矩形重叠以创建进度条？

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下显示条形范围，以便用户可以通过查看条的位置来了解相对百分比是多少？

编辑：

我想知道如何仅创建条形，这里的文本已省略。

- Jal

---

这个问题远非清晰明了。条形图的范围是什么？您想创建矩形还是文本？ - Gerardo Furtado

抱歉问题不太清楚，实质上我想创建一个带有每个条形的背景的条形图，有点像进度条。 - Jal

Answer 1

首先，使用比例尺根据数据创建条形图。使用适当的比例尺可以轻松解决此问题：

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

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

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

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

为了创建重叠，将实际的条形图与背景条形图具有相同的x、y和height属性。但是它们必须在背景之后绘制：在SVG中，后面绘制的对象会保持在顶部。

这里是一个演示：

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

var svg = d3.select("svg");

var scale = d3.scaleLinear()
  .domain([0, 12000000])
  .range([0, 480]);

var background = svg.selectAll(null)
  .data(my_values)
  .enter()
  .append("rect")
  .attr("x", 10)
  .attr("y", function(d, i) {
    return 10 + i * 20
  })
  .attr("height", 10)
  .attr("width", function(d) {
    return scale(scale.domain()[1])
  })
  .attr("rx", 5)
  .attr("ry", 5)
  .style("fill", "#ddd");

var bars = svg.selectAll(null)
  .data(my_values)
  .enter()
  .append("rect")
  .attr("x", 10)
  .attr("y", function(d, i) {
    return 10 + i * 20
  })
  .attr("height", 10)
  .attr("width", function(d) {
    return scale(d.cost)
  })
  .attr("rx", 5)
  .attr("ry", 5)
  .style("fill", "#666");

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="200"></svg>

PS：如果您想要删除条形图右侧的圆角，则有一些选项：例如创建路径而不是条形图，或在实际条形图上方创建小条形图以覆盖圆角。问题在于，在SVG矩形中，您无法选择哪个角将是圆角：rx和ry应用于所有角。

- Gerardo Furtado