d3js堆栈图：如何在每个图层上添加文本？

Question

在Stacked Area via Nest的示例中，我想在每个图层上添加文本。像

文本的位置并没有真正的问题，只是被中间偏右。

Answer 1

你可以做这样的事情：

0）使用下面的函数Calculte路径的中心：

function getMyCentroid(element) { 
    var bbox = element.getBBox(); 
    return [bbox.x + bbox.width/2, bbox.y + bbox.height/2]; 
    } 

1）下一页选择所有路径，并计算出它的中心。

2）附加一个文本，并将其在中心处svg.append("text")

3位）设置与该路径相关联的文本这样.text(d3.select(d).data()[0].key);

d3.selectAll(".layer")[0].forEach(function(d) { 
    var centroid = getMyCentroid(d); 
    svg.append("text").attr("x", centroid[0]).attr("y", centroid[1]).text(d3.select(d).data()[0].key); 
    }) 

var format = d3.time.format("%m/%d/%y"); 
 

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

 
var x = d3.time.scale() 
 
    .range([0, width]); 
 

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

 
var z = d3.scale.category20c(); 
 

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

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

 
var stack = d3.layout.stack() 
 
    .offset("zero") 
 
    .values(function(d) { return d.values; }) 
 
    .x(function(d) { return d.date; }) 
 
    .y(function(d) { return d.value; }); 
 

 
var nest = d3.nest() 
 
    .key(function(d) { return d.key; }); 
 

 
var area = d3.svg.area() 
 
    .interpolate("cardinal") 
 
    .x(function(d) { return x(d.date); }) 
 
    .y0(function(d) { return y(d.y0); }) 
 
    .y1(function(d) { return y(d.y0 + d.y); }); 
 

 
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.csv("https://gist.githubusercontent.com/cyrilcherian/e6f56b1b9337142c0bde/raw/8b1728849e193db0e8b960ecb750062f4e0cb487/data.csv", function(error, data) { 
 
    if (error) throw error; 
 

 
    data.forEach(function(d) { 
 
    d.date = format.parse(d.date); 
 
    d.value = +d.value; 
 
    }); 
 

 
    var layers = stack(nest.entries(data)); 
 

 
    x.domain(d3.extent(data, function(d) { return d.date; })); 
 
    y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]); 
 

 
    svg.selectAll(".layer") 
 
     .data(layers) 
 
    .enter().append("path") 
 
     .attr("class", "layer") 
 
     .attr("d", function(d) { return area(d.values); }) 
 
     .style("fill", function(d, i) { return z(i); }); 
 

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

 
    svg.append("g") 
 
     .attr("class", "y axis") 
 
     .call(yAxis); 
 
    
 
    function getMyCentroid(element) { 
 
    var bbox = element.getBBox(); 
 
    return [bbox.x + bbox.width/2, bbox.y + bbox.height/2]; 
 
    } 
 
    d3.selectAll(".layer")[0].forEach(function(d) { 
 
    var centroid = getMyCentroid(d); 
 
    svg.append("text").attr("x", centroid[0]).attr("y", centroid[1]).text(d3.select(d).data()[0].key).style("fill", "red"); 
 
    }) 
 
    
 
});

body { 
 
    font: 10px sans-serif; 
 
} 
 

 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

希望这帮助！