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
- d3.js tree with json string dont recognize as Array
- Adding a line on an svg with image in background in d3
- Follow up: drawing-sequence-logos-in-d3 using images
- Reset svg container to current view
- How do I add labels to d3.js force bubble chart
- dc.js geoChoroplethChart doesn't display legend
- D3 simple drop down menu on click
- Im trying to remove empty children from my d3js tree
- Light gridlines for already-existing axis
- Adding labels to the middle of a sunburst on mouseover
- Custom timeline tick with d3 and dc.js
- How do I execute a php script from javascript from D3.js?
- how to integrate D3.js with the Renderer API's with Angular 2
- How to insert pie charts in Pack Layout in d3.js?
- Unable to add text on link in d3 collapsible tree
- d3js alert leaf name
- How to plot points on a map projection in D3.js and filter the data using range sliders?
- D3/SVG. How do I position a child svg element beyond its parent's extent?
- d3 is not defined - ReferenceError
- Remove d3 tooltip onclick
- How to group svg elements
- dc.js add filter on multiple values
- How to remove the border on the hover element in nvd3
- Re-adding removed elements in d3.js
- d3.js - updating fill color for path works with string array, but not with json data
- Constructing Force Directed Graphs From Only Link Data
- special characters using d3js
- D3.js Grouped Bar chart using nested file
- xCharts - Rendering of text is blurry
- I am trying yo make D3plus accept non-date value for boxplot and reduce space between rows in bootstrap