D3定位

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

如果你讓你的原始數據的標籤文本部分，即每個元素添加屬性所有這一切都將容易得多「標籤」。然後，您可以將相同的數據傳遞給創建標籤的代碼，訪問其他數據並正確設置座標。