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

Question

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

这是我写的

var w = 500;
   var h = 100;
   var barPadding = 5;
   
   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 / 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
var svgContainertext = d3.select("body").append("svg")
                                    .attr("width", 100)
                                     .attr("height", 20);
                          
svgContainertext.append("g")
.selectAll("text")
.append("text")

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

但是代码没有显示结果。我是 D3 的新手。提前致谢。

Answer 1

删除 .selectAll("text") 将显示文本 2010。我制作了一个 JSFiddle 来显示它。

如果您想阅读有关选择的内容，建议您阅读 this article

基本上它不起作用，因为 .selectAll('text') returns 是一个空选择，然后您将文本节点附加到空。

它适用于之前绘制的 rects，因为该选择使用了 .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");

Answer 2

您的文字未显示，因为您在 .selectAll("text") 之后添加了文字广告，这导致选择为空，因此无法添加您的文字。

此外，您要添加的文本位于新的 svg 中，无论如何都不会链接到您的图表。我创建了一个 plunk 来展示如何将文本放在同一个 svg 中：http://plnkr.co/edit/EHVB65sn7Oc67s7woKrj?p=preview

更新代码：

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 变量减少了可用于条形图的 space，允许查看文本并正确定位它。

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

How do i add a fixed text beside bar chart using D3

javascript

d3.js