2

我把这个条形图放在一起（滚动到右下角）

基于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;
}
4

1 回答 1

3

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

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

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

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

于 2013-04-27T11:57:38.560 回答