Question

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

我写了这个

＆＃13;

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");

＆＃13;

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

Answer 1

删除.selectAll("text")会显示2010年的文字。我制作了JSFiddle来展示这一点。

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

基本上它不起作用，因为.selectAll('text')返回一个空选择，之后你将一个文本节点追加到任何东西。

适用于之前绘制的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变量减少了条形图的可用空间，允许查看文本并正确定位。

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

2 个答案: