score:1
you can do something like this:
0) calculte the center of the path using the function below:
function getmycentroid(element) {
var bbox = element.getbbox();
return [bbox.x + bbox.width / 2, bbox.y + bbox.height / 2];
}
1) next select all path and calculate its center.
2) append a text and position it at the center svg.append("text")
3) set the text associated with the path like this .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>
hope this helps!
Source: stackoverflow.com
Related Query
- d3js stack chart: how to add text on each layer?
- d3js - how to add the text each of the arc's centre, after animation end?
- D3 : How to add labels top of in each bar in grouped bar chart
- How to add svg rectangles as background behind axis tick labels in d3js if ticks are inside chart
- How to append text to normalized stacked chart in d3js v4
- How to add text legends in bars of a bar chart in D3?
- How do I make this Angular D3.JS Chart Style and add Links to each pie?
- How do you add multiple lines to a D3JS line chart where the depedent variable data sources start at different positions along the range?
- how to add tooltip for donut chart in loop using d3js
- How to append text to d3js dispatch chart
- How to center align text labels on bar chart using d3js
- What am i doing wrong? Add text to bar chart with d3js
- d3.js how do I add text to Marimekko chart
- How to Add Multiline Text Tooltips in Bar Chart D3 JS
- Add text on top of bar in d3js chart -- no <text> elements added
- how can we add text to a svg circle in d3js
- How to place text inside each bar of the chart using d3
- d3js chart with crosshair as tooltip: How to Add 2 lines which intersect at cursor position
- How to add non-overlapping polylines and text labels to 3D pie chart using d3.js?
- How to add text on top the heatmap to properly show value for each rectangle when using D3.js?
- D3 chart how to add arrow on each axis end
- How can I add title text to this chart in d3?
- How to add text to D3 js donut chart
- How to add text to a vertical line d3js
- how to add title to d3js bubble chart with force layout
- add string text to the right of each bar. how to do it?
- How do i add a fixed text beside bar chart using D3
- How to add x axis text in Bar Chart column
- How to set text color for my d3 chart title?
- How to add drop shadow to d3.js pie or donut chart
More Query from same tag
- How do I create an axis with non-equal tick intervals in D3.js
- nvd3 does not calculate maximum y value correctly
- Introduce gap in path in d3
- set tickValues for y1Axis in linePlusBarChart in ng2-nvd3
- D3 Google Sheet Access-Control-Allow-Origin error
- VueJS lifecycle after submit form
- d3.transition().attr('x', y) does not work when d3.attr('x', y) does
- Uncaught error reading in json data to d3 force-directed graph
- Is there a correct way to spot non-fatal errors in js?
- AngularJs choose charts framework d3.js vs highcharts
- Grouping items and expand branches in D3 Org Chart
- Align table columns under d3 chart columns
- D3 Interactive Stream Graph: Data repeating past one month
- How to accurately zoom d3 maps which have already been translated
- D3.js Bubble Chart from csv
- Mouse events and brush in D3
- d3 trying to open html in div or iframe on click
- Making a simple table Using D3 in meteor
- d3.js store pixel coordinates of circles appended haphazardly from force simulation
- Problems with label in d3.js
- Donut chart with partial ring around
- A function in d3.js to create start and end nodes and node and link texts from a JSON source of varying size
- how to append option into select combo box in d3
- Problem with label position with more than one nvd3 graph on one site
- D3js Is it possible create view like tree structure with custom nodes
- How do I modify this D3.js to accept different JSON structure?
- Are D3 value keys matched in the same way that default index numbers are when using enter()?
- how to fill hexagon with background image in d3js?
- How to dynamically reposition binary tree nodes visually
- Why d3.js-lasso is not reading svg variables