在 d3 中将标签移动到矩形上方

Question

我对d3很陌生.js我尝试在这里创建一个非常简单的进展。

代码为：

var data = [2000, 200]; // here are the data values; v1 = total, v2 = current value
  var chart = d3.select("#container").append("svg") // creating the svg object inside the 
    .attr("class", "chart")
    .attr("width", 400) // bar has a fixed width
    .attr("height", 30 * data.length);
  var x = d3.scale.linear() // takes the fixed width and creates the percentage from the data
    .domain([0, d3.max(data)])
    .range([0, 400]); 
  chart.selectAll("rect") // this is what actually creates the bars
    .data(data)
    .enter().append("rect")
    .attr("width", x)
    .attr("height", 10)
    .attr("rx", 5) // rounded corners
    .attr("ry", 5);
 var text = [0,200,2000]   
  chart.selectAll("text") // adding the text labels to the bar
    .data(text)
    .enter().append("text")
    .attr("x", x)
    .attr("y", 20) // y position of the text inside bar
    .attr("dx", -3) // padding-right
    .attr("dy", ".35em") // vertical-align: middle
    .attr("text-anchor", "end") // text-align: right
    .text(String);

它呈现图形。这里有几个问题：

1. 对于文本，我总是渲染0，但它不可见。
2. 我希望当前值文本显示在下面，并且开始和结束应该移动到标记上方。

感谢您的帮助！

Answer 1

要在矩形上方显示任何文本，您必须将其向下移动一点。

关于文本，您可以设置不同的锚点...

.attr("text-anchor", function(_, i) {
   return ["start", "middle", "end"][i]
})

。以及使用索引的不同垂直位置：

.attr("y", function(_, i) {
    return i === 1 ? 36 : 10;
}) 

以下是更新的代码：

var data = [2000, 200]; // here are the data values; v1 = total, v2 = current value
var chart = d3.select("#container").append("svg") // creating the svg object inside the 
  .attr("class", "chart")
  .attr("width", 400) // bar has a fixed width
  .attr("height", 30 * data.length);
var x = d3.scale.linear() // takes the fixed width and creates the percentage from the data
  .domain([0, d3.max(data)])
  .range([0, 400]);
chart.selectAll("rect") // this is what actually creates the bars
  .data(data)
  .enter()
  .append("rect")
  .attr("y", 18)
  .attr("width", x)
  .attr("height", 10)
  .attr("rx", 5) // rounded corners
  .attr("ry", 5);
var text = [0, 200, 2000]
chart.selectAll("text") // adding the text labels to the bar
  .data(text)
  .enter()
  .append("text")
  .attr("x", x)
  .attr("y", function(_, i) {
    return i === 1 ? 36 : 10;
  }) // y position of the text inside bar // padding-right
  .attr("dy", ".35em") // vertical-align: middle
  .attr("text-anchor", function(_, i) {
    return ["start", "middle", "end"][i]
  }) // text-align: right
  .text(String);

.chart rect:first-of-type {
  color: #fff;
  stroke: #3994b6;
  fill: white;
}
#container {
  padding: 30px
}
text:first-of-type {
  fill: #3994b6;
  font-family: sans-serif;
  font-size: 12px;
}
.chart rect:nth-of-type(2) {
  color: #fff;
  stroke: transparent;
  fill: #3994b6;
}
text:nth-of-type(2) {
  fill: #a8d4e4;
  font-family: sans-serif;
  font-size: 12px;
}
.chart rect:nth-of-type(3) {
  color: #fff;
  stroke: transparent;
  fill: #3994b6;
}
text:nth-of-type(3) {
  fill: #a8d4e4;
  font-family: sans-serif;
  font-size: 12px;
}

<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="container"></div>