Question

我把this bar chart放在一起（滚动到右下角）

基于带负值的条形图的D3's example

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

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;
}

Answer 1

正如评论中所指出的那样，您的标签会显示在条形图后面，因为您要在条形图之前添加它们。要解决此问题，只需在添加条形码的代码之后移动添加标签的代码。

要将标签放在条形图上，您需要调整要分配的x和y坐标。特别是，您需要为条形指定相同的x坐标，即

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

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

D3在条形图上定位文本标签

1 个答案: