score:0

Just set the y and dy attributes:

labels.enter().append("g")
    .append('text')
    .attr("y", 0)
    .attr("dy", 0)
    //etc...

Here is your updated code:

var movies = `day,titanic eva mission impossible,avatar,akira,frozen,deliverance,avengers
1,40,8,10,0,0,0
2,18,5,1,13,0,0
3,14,3,1,10,0,0
4,7,3,0,5,27,15
5,4,3,0,2,20,14
6,3,1,0,0,10,13
7,2,0,0,0,8,12
8,0,0,0,0,6,11
9,0,0,0,0,3,9
10,0,0,0,0,1,8`;

var data = d3.csvParse(movies);

dataViz(data);

function dataViz(data) {
  var xScale = d3.scaleLinear().domain([0, 10]).range([0, 960]);
  var yScale = d3.scaleLinear().domain([0, 100]).range([500, 0]);

  var movies = ["titanic eva mission impossible", "avatar", "akira", "frozen", "deliverance", "avengers"];

  var fillScale = d3.scaleOrdinal().domain(movies)
    .range(["#fcd88a", "#cf7c1c", "#93c464", "#75734F", "#5eafc6", "#41a368"]);

  stacked = d3.stack()
    .offset(d3.stackOffsetSilhouette)
    .order(d3.stackOrderInsideOut)
    .keys(movies);

  yScale.domain([-50, 50]);

  var xValue = function(d) {
    return d.day;
  };

  var stackArea = d3.area()
    .x(d => xScale(xValue(d.data)))
    .y0(d => yScale(d[0]))
    .y1(d => yScale(d[1]))
    .curve(d3.curveBasis);

  d3.select("svg")
    .selectAll("path").data(stacked(data)).enter().append("path")
    .style("fill", d => fillScale(d.key))
    .attr("d", d => stackArea(d));

  labels = d3.select("svg")
    .selectAll('text').data(stacked(data))
  labels.enter().append("g")
    .append('text')
    .attr("y", 0)
    .attr("dy", 0)
    .attr('class', 'area-label')
    .text(d => d.key)
    .attr('transform', d3.areaLabel(stackArea).interpolateResolution(1000).interpolate(true));

  d3.select("svg").select("g").select("text").call(wrap, 10);
}

function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
      words = text.text().split(/\s+/).reverse(),
      word,
      line = [],
      lineNumber = 0,
      lineHeight = 1.1, // ems
      y = text.attr("y"),
      dy = parseFloat(text.attr("dy")),
      tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}
body {
  margin: 0px;
}

.area-label {
  font-family: sans-serif;
  height: 20;
  width: auto;
  fill-opacity: 0.7;
  fill: white;
}

path:hover {
  fill-opacity: 1;
  fill: black;
}

path {
  fill-opacity: 0.8;
  stroke-width: 0.5;
}

text {
  pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>
<script src="https://unpkg.com/d3-area-label@1.2.0"></script>
<div id="viz">
  <svg style="width:960px;height:500px;"></svg>
</div>

PS: d3-area-label positioned the text at the vertical center of the path. However, you'll have to move it up a bit, to avoid the text overlapping the path below.


More Query from same tag