Javascript 如何使用D3在条形图旁边添加固定文本

我试图在条形图旁边添加一个文本。看起来会像 两个条形图它们的右侧都有一个文本。我尝试了很多方法，但是找不到或者可能我不理解，因为我是D3的初学者。这是我在stackoverflow中的第一个问题

这是我写的

var w=500；
var h=100；
var=5；
var数据集=[5,10,13,19,21,25,22,18,15,13，
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
//创建SVG元素2010
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
svg.selectAll（“rect”）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i）{
返回i*（带数据集长度）；
})
.attr（“y”，函数（d）{
返回h-（d*4）；}
)
.attr（“宽度”，w/dataset.length-条形填充）
.attr（“高度”，功能（d）{
返回d*4；//仅返回数据值
})
.attr（“填充”，功能（d）{
返回“rgb（0，0，+（d*10）+”）；
});
///对于固定文本
var svgContainertext=d3.select（“body”）.append（“svg”）
.attr（“宽度”，100）
.attr（“高度”，20）；
svgContainertext.append（“g”）
.selectAll（“文本”）
.append（“文本”）
.案文（“2010年”）
.attr（“x”，20）
.attr（“y”，10）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“11px”）
.attr（“填充”、“黑色”）删除
。选择全部（“文本”）
将显示文本。我做了一个演示

如果你想阅读选集，我建议你读一读

基本上，它不起作用，因为
.selectAll（'text'）
返回一个空的选择，然后将一个文本节点附加到nothing

它适用于前面绘制的
矩形
，因为在该选择上使用了
.data（）
方法

var svgContainertext = d3.select("body").append("svg")
  .attr("width", 100)
  .attr("height", 20);

svgContainertext.append("g")
  .append("text")
  .text("2010")
  .attr("x",20)
  .attr("y",10)
  .attr("font-family", "sans-serif")
  .attr("font-size", "11px")
  .attr("fill", "black");

您的文本未显示，因为您在.selectAll（“文本”）之后添加了文本广告，这将导致选择为空，因此无处添加文本

此外，您要添加的文本位于新的svg中，并且无论如何都不会链接到图表。我创建了一个plunk来演示如何将文本放在同一个svg中：

更新代码：

var w = 500;
var h = 100;
var barPadding = 5;
var textWidth = 30;
var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
  11, 12, 15, 20, 18, 17, 16, 18, 23, 25
];

 //Create SVG element Men 2010
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
    return i * ((w - textWidth) / dataset.length);
  })
  .attr("y", function(d) {
    return h - (d * 4);
  })
  .attr("width", w / dataset.length - barPadding)
  .attr("height", function(d) {
    return d * 4; //Just the data value
  })
  .attr("fill", function(d) {
    return "rgb(0, 0, " + (d * 10) + ")";
  });

 ///for the fixed text


svg.append("g")
  .append("text")
  .text("2010")
  .attr("x", w - textWidth)
  .attr("y", h / 2)
  .attr("font-family", "sans-serif")
  .attr("font-size", "11px")
  .attr("fill", "black");

我所做的是使用相同的svg来附加文本（在一个组中）。我还使用textWidth变量减少了条形图的可用空间，允许查看文本并正确定位。
它也可以工作。非常感谢@Benjamin Udink ten Cate:）。不客气：-）。请毫不犹豫地将其中一个答案标记为答案并投票表决；-）