Javascript D3条形图上文本标签的定位

我放在一起（滚动到右下角）

基于带负值的条形图的

出于某种原因，文本标签显示在矩形后面。我怎样才能纠正这个问题？另外，我想让文本标签显示在横条上，希望不会出现一些横条对于文本来说太小的问题

var margin = {top: 30, right: 10, bottom: 10, left: 10},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width])

var y = d3.scale.ordinal()
    .rangeRoundBands([0, height], .2);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("top");

var svg = d3.select("#barchart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.selectAll("text")
    .data(["asdf","DDdf","asdfsa"])
  .enter().append("text").text(function(d) {
        return d;
   }).attr("y", function(d, i) {
        return i * (height / ["asdf","asdf","asdfsa"].length)+30;
   }).attr("x", function(d) {
        return 0; //height - (d * 4);
   }).text(String);


//d3.tsv("data.tsv", type, function(error, data) {
  x.domain(d3.extent(data, function(d) { return d.netdonations_over_population_to_gdppercap_percentage; })).nice();
  y.domain(data.map(function(d) { return d.name; }));

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", function(d) { return d.netdonations_over_population_to_gdppercap_percentage < 0 ? "bar negative" : "bar positive"; })
      .attr("x", function(d) { return x(Math.min(0, d.netdonations_over_population_to_gdppercap_percentage)); })
      .attr("y", function(d) { return y(d.name); })
      .attr("width", function(d) { return Math.abs(x(d.netdonations_over_population_to_gdppercap_percentage) - x(0)); })
      .attr("height", y.rangeBand());

  svg.append("g")
      .attr("class", "x axis")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
    .append("line")
      .attr("x1", x(0))
      .attr("x2", x(0))
      .attr("y2", height);
}
//});

function type(d) {
  d.value = +d.netdonations_over_population_to_gdppercap_percentage;
  return d;
}

var margin={top:30，right:10，bottom:10，left:10}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x=d3.scale.linear（）
.范围（[0，宽度]）
变量y=d3.scale.ordinal（）
.rangeRoundBands（[0，高度]，.2）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“top”）；
var svg=d3。选择（“条形图”）。追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.selectAll（“文本”）
.数据（[“asdf”、“DDdf”、“asdfsa”]）
.enter（）.append（“text”）.text（函数（d）{
返回d；
}).attr（“y”，函数（d，i）{
返回i*（高度/[“asdf”、“asdf”、“asdfsa”]。长度）+30；
}).attr（“x”，函数（d）{
返回0；//高度-（d*4）；
}).文本（字符串）；
//d3.tsv（“data.tsv”），类型，功能（错误，数据）{
x、 domain（d3.extent（数据，函数（d）{return d.netu over_population_to_gdppercap_percentage；}））.nice（）；
y、 域（data.map（函数（d）{返回d.name；}））；
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”，函数（d）{return d.netu over_population_to_gdppercap_percentage<0？“bar负值”：“bar正值”；}）
.attr（“x”，函数（d）{return x（Math.min（0，d.netu over_population_to_gdppercap_percentage））；}）
.attr（“y”，函数（d）{返回y（d.name）；}）
.attr（“宽度”，函数（d）{return Math.abs（x（d.netu over_population_to_gdppercap_percentage）-x（0））；}
.attr（“高度”，y.rangeBand（））；
svg.append（“g”）
.attr（“类”、“x轴”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.附加（“行”）
.attr（“x1”，x（0））
.attr（“x2”，x（0））
.attr（“y2”，高度）；
}
//});
功能类型（d）{
d、 值=+d.NETOVERATIONS\U超过人口\U到\U gdppercap\U的百分比；
返回d；
}

正如评论中指出的，您的标签显示在该栏后面，因为您是在栏前面添加标签。要解决此问题，只需将添加标签的代码移动到添加条的代码之后

要将标签放置在条上，需要调整指定的

x

和

y

坐标。特别是，您需要指定与条形图相同的

x

坐标，即

.attr("x", function(d) { return x(Math.min(0,
        d.netdonations_over_population_to_gdppercap_percentage)); })

---

如果将标签文本作为原始数据的一部分，即为每个元素添加一个属性“label”，则所有这些都会变得容易得多。然后，您可以将相同的数据传递给创建标签的代码，访问其他数据并正确设置坐标。

要将文本移到前面，只需在添加条后添加它，因为z顺序由DOM树中元素的顺序决定。我不确定你所说的“还有，我想让文本标签显示在横条上，希望一些横条对于文本来说太小不会成为问题。”