D3 Размещение текстовых меток на Bar Chart

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

Все это будет гораздо проще, если вы сделаете текст этикетки часть ваших исходных данных, то есть для каждого элемента добавить атрибут "метка". Затем вы можете передать те же данные в код, который создает метки, получить доступ к другим данным и правильно установить координаты.