如何添加工具提示條形圖d3.js

Question

我想在條形圖頂部的條形圖中打印數據的值...如果2012年的人口數量是20000124，那麼在條形頂部在2012年，它應該打印20000124.

我該怎麼做？ 這是我worote代碼打印條形圖..

var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
width = 220 - margin.left - margin.right, 
height = 220 - margin.top - margin.bottom; 

var formatPercent = d3.format(".0%"); 

var x = d3.scale.ordinal() 
.rangeRoundBands([0, width], .1); 

var y = d3.scale.linear() 
.range([height, 0]); 

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

var yAxis = d3.svg.axis() 
.scale(y) 
.orient("left"); 

var svg = d3.select("body").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 + ")"); 

    d3.tsv("data/bar2.tsv", function(error, data) { 

    data.forEach(function(d) { 
d.frequency = +d.frequency; 
}); 

x.domain(data.map(function(d) { return d.letter; })); 
y.domain([0, 100]); 

svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
.append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text("Frequency"); 

svg.selectAll(".bar") 
    .data(data) 
.enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { return x(d.letter); }) 
    .attr("width", x.rangeBand()) 
    .attr("y", function(d) { return y(d.frequency); }) 
    .attr("height", function(d) { return height - y(d.frequency); }) 
    .text(function(d) { return d.letter}); 

}); 

所以基本上我如何在每欄的頂部添加一個標籤？

Answer 1

您可以通過在矩形後添加文本元素來將標籤添加到條。東西沿線

var sel = svg.selectAll(".bar") 
    .data(data).enter(); 

sel.append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { return x(d.letter); }) 
    .attr("width", x.rangeBand()) 
    .attr("y", function(d) { return y(d.frequency); }) 
    .attr("height", function(d) { return height - y(d.frequency); }); 

sel.append("text") 
    .attr("x", function(d) { return x(d.letter); }) 
    .attr("y", function(d) { return y(d.frequency); }) 
    .text(function(d) { return d.letter}); 

你可能想調整文本的位置，以你喜歡的。