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.
Source: stackoverflow.com
Related Query
- Wrapping labels in StreamGraph
- Wrapping long labels with axis transition in D3.js v4
- Readable labels for D3 streamgraph
- Wrapping text labels
- Wrapping multi line labels
- Tick text/variable labels not wrapping in d3 bar chart
- Wrapping long text labels in D3 without extra new lines
- How do I include newlines in labels in D3 charts?
- Placing labels at the center of nodes in d3.js
- D3js: Automatic labels placement to avoid overlaps? (force repulsion)
- d3.js: Align text labels between ticks on the axis
- Create a D3 axis without tick labels
- Wrapping Text in D3
- How can I position rotated x-axis labels on column chart using nvd3?
- d3.js axis labels - color not changing
- D3 Real-Time streamgraph (Graph Data Visualization)
- MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
- Long tick labels getting cut off in plotly.js chart
- Hide Tick Labels in D3 on Line Graph
- D3.js Chart: Labels (<text> Tags) Not Showing On IE11
- Add labels to D3 Chord diagram
- How to do wordwrap for chart labels using d3.js
- D3 line chart axis text labels in multi line
- D3 - Pie Chart & Force Directed Labels
- change SVG text to css word wrapping
- Labels / text on the nodes of a D3 force directed graph
- how to create labels for data in donut chart using d3.js
- c3js position of data labels
- Multi-Level/Grouping of Axis Labels Using d3
- How to fit variable length tick labels on a D3 line chart?
More Query from same tag
- How do i specify the axis range in React-Vis
- Scope issue between jQuery request and d3.js
- D3.js Plotting Multiple Data Sets from Separate Files
- Render text in center of line in d3.js
- How to properly transpose X and Y axes using the D3 axis commands?
- Adding circles to multi line graph with dropdown on d3.js
- How to use a JSON file as an array of objects in Javascript
- d3 Uncaught TypeError: zoomed.x is not a function
- D3.js Brush Controls: getting extent width, coordinates
- How to select elements from array field in dc.js / crossfilter / d3 and use each of them as separate data point for chart?
- Z-index in d3.js
- d3js diagonal paths in tree layout don't look right
- D3 data not updating through onclick function
- Adding two paths to d3
- D3 - Finding an SVG Element with the same data
- d3 force layout link position in node
- How can I create hierarchical bar chart in d3.js
- A good book for learning D3.js
- Color d3 radial tree according to node property
- Why are these labels not visible
- d3js: Use view port center for zooming focal point
- Javascript/d3 Function for creating new array from an array of arrays
- D3.js X axis line not displaying
- d3 xAxis with ordinal scale and a click event?
- Choropleth map using d3.js
- mpld3 plugin to set xtics
- Map created from geojson file just fills the entire canvas with the color of the path fill
- Generating 3D surface plots with Vega?
- Is dc.js (used with crossfilter and d3.js) still a good option for Big data visualization on a browser page?
- D3 update stacked bar chart based on non-constant amount of values in csv-file