score:10
You were close! In cases like this, I'd recommend doing something like the following:
.label(function(d) {
console.log(JSON.stringify(d));
})
to get a feel for the structure of your data. If you do so, you'll see that key
and value
are under d.data
, so you could have a label like
.label(function(d) {
return d.data.key + ' ' + d.data.value + '%';
})
If you just want to calculate the fraction of the circle being displayed, you can use the startAngle
and endAngle
properties.
.label(function(d) {
return d.data.key + ' ' + Math.round((d.endAngle - d.startAngle) / Math.PI * 50) + '%';
});
(d.endAngle - d.startAngle)
will give you the number of radians the slice is displaying, so you can calculate a percentage from there by dividing by the number of radians in a circle.
score:0
Indeed, it does not have d.data. Instead I use the .renderlet() : :
.renderlet(function(chart){
chart.selectAll('text.pie-slice').text( function(d) {
return d.data.key + ' ' + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100) + '%';
})
})
score:1
.label
is the right way to modify BUT pie chart has bug,
Check by log on d
.label(d => {
console.log(d);
// {
// key: 'which you return in dimension',
// value: 'ex: 259.91'
// }
})
Ex, have 6 objs in array, BUT log may just 3 or 4 of them @@ To work around this bug
.on('pretransition', function(chart){
chart.selectAll('text.pie-slice').text(d => {
console.log(d);
// {
// data: {
// key: 'which you return in dimension',
// value: 'ex: 259.91'
// },
// endAngle: 'xxx',
// startAngle: 'yyy'
// }
})
})
By this way we can log enough 6 objs in array
The label text is return val inside text(d => {})
chart.selectAll('text.pie-slice').text(function(d){
let label = d.data.key;
return label + ': ' + Number(d.data.value).toFixed(2);
})
//Or play with percentage
chart.selectAll('text.pie-slice').text(function(d){
return d.data.key + ' ' + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100) + '%';
})
Source: stackoverflow.com
Related Query
- Add percentages to the pie chart label in dc.js
- how to add legend to a pie chart using D3js? And how to centralise the pie chart?
- d3.js: How to add value below the label in donut chart
- How to add events to the individual sections(arcs) of a pie chart created out of d3.js?
- Add dynamic label on d3 dynamic pie chart
- How to fix the label alignment on pie chart in D3.js?
- How to add drop shadow to d3.js pie or donut chart
- d3 show number instead of percentages on pie chart
- Space out part of the pie chart in d3?
- How to add a nice legend to a d3 pie chart
- add y axis label to NVD3 Multi-Bar Chart
- How to add a legend and labels to the pie chart?
- Donut Pie Chart - Add a Title - NVd3.js
- d3js pie graph from jquery ajax - correlating json keys and values on the chart
- D3 v4 - Pie Chart with connectors outside the pie and with dots.
- d3.js create the pie chart but square shaped
- d3.js add a label in the center of a path
- Label names are not displayed from input data in pie transition chart of d3.js
- Is there a way to add a highlight to pie chart in d3?
- d3.js: Pie Chart Layout - Adjusting the Angle to Create Shutter Effect
- How to correctly add labels to the d3 pie chart?
- Dimple.js - Add data labels to each bar of the bar chart
- How to Increase the width of C3 pie chart Legend only. Not for the whole graph
- Add some gap in between legend and the chart
- Fill the inside of a pie donut chart d3
- move a slice of the pie chart using d3.js
- Edit the data in a pie chart rather than create a new one
- Section Text label doesn't display in D3.JS drill down pie chart
- D3.JS - how do I add gridlines to my pie chart
- changing color of d3.js pie chart label when hovering over slice?
More Query from same tag
- Getting query string at end of URL and using it to fetch data
- Adding form input fields using D3
- Adding d3 Label not working
- How do you set a default focus() on an element
- Failing to transition in D3 off new data
- Use words as tick labels with unequal intervals in D3.js
- JavaScript - Bar Graph with custom animation fill
- "Cannot read property 'length' of null" with Angular-cli and a json file
- Multiple drag functions on d3 force drag layout
- d3 chart won't append to any selector other than body
- change color of nodes by click on
- dimple.js - scatter-plot, series listed twice in tooltip
- D3 semantic zooming with Reusable Pattern
- Unable to resize Cubism graph D3.js
- Drawing a line using d3 is not visible when all data items are the same
- Aligning labels to bar chart using d3.js
- D3 Trouble Altering Date
- d3 nested variable data binding
- How to display D3 Chart using directive?
- How to make mouseover functionality permanent
- How to resize circle in d3.js
- D3 stacked bar chart not able to see full x axis lables
- D3 zoom on jquery button click
- d3.js tooltip display "[object Promise]" instead of value
- D3 mouseover return name
- What does fusion chart buy you that D3 doesn't?
- D3.js: calculate width of bars in time scale with changing range?
- dimple.js: Tool-tip placement in a chart of a nested svg element
- Animated sort stacked bar chart d3.js
- Multiple transitions on multiple d3 paths