score:1
Accepted answer
lets answer your questions one by one.
- to adjust the labels create a more creative function in the transform for the text like so.
.attr("transform", function(d) {
let labelcoords = labelarc.centroid(d); // retrieve the label coords
let offset = 6; // distance by which you want the labels to move out
//now get the new label coords by running a function on them
labelcoords[0] = adjustlabelcoords(labelcoords[0]);
labelcoords[1] = adjustlabelcoords(labelcoords[1]);
//this function checks if the coords are negative or positive and applies the offset
function adjustlabelcoords(coord) {
if (coord < 0) {
coord = coord - offset; //if coord is negative, apply a negative offset to move more left or up
} else if (coord > 0) {
coord = coord + offset; //if coord is positive, apply a positive offset to move right or down
}
return coord;
}
return "translate(" + labelcoords + ")"; }
)
- the class
.piechartouterlabel
is being applied see the screenshot below. so i am not able to understand your issue.
you can see that the class is being applied correctly to the text.
- your text is already aligned in the center using the
text-anchor="middle"
attribute. i suppose you want it to be vertically also centered. to do that you can do the following:
change your svgtextlabel to:
svgtxtlabel
.attr("text-anchor", "middle")
.attr("font-size", (labelsize)+'em')
.attr("transform", `translate(0,-10)`)
//.attr("dy", '-1.5em')
.attr("class","piechartcentertextlabel")
.transition().delay(2000)
.text("total");
and your svgtxtvalue to:
let svgtxtvalue = svg.append("text");
svgtxtvalue
.attr("text-anchor", "middle")
.attr("font-size", (valuesize)+'em')
.attr("transform", "translate(0,10)")
.attr("class","piechartcentertextlabel")
.transition().delay(2000)
.text(total);
all of this produces:
here is the final stackblitz.
Source: stackoverflow.com
Related Query
- How can i fix arc labels overlapping in d3js?
- How can I position rotated x-axis labels on column chart using nvd3?
- 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?
- How to avoid labels overlapping in a D3.js pie chart?
- D3.js - How can I prevent Circles & Text Overlapping
- How can i get the startAngle and endAngle of each arc in the sunburst example using d3.js?
- dimple.js How can I change the labels of a chart axis without changing the data?
- d3js overlapping elements: how to "pass through" clicks to "lower" element?
- How can I choose a legible color to draw text on a bar in a d3js chart?
- d3js : how to put circles at the end of an arc
- How can I add labels inside the points in a scatterplot?
- d3js v4: How can I apply force to nodes onclick and make it look like a tween?
- How to Hide Overlapping Text of Labels in D3 Zoomable Pack Layout?
- d3.js, how can i create an axis with custom labels and customs ticks?
- How can I draw an arc with array of points in d3 v4
- How to add labels into the arc of a chord diagram in d3.js
- How can I make an arc thiker than the other in D3.js
- How can I add axis labels to a sankey diagram in d3?
- D3js SVG open lines display a fill artifact, how to fix it?
- How can I display tooltips from multiple maps when mousover on one of the maps in D3js
- How can I dynamically update text labels in d3?
- How can I rotate my text labels so they can't go upside-down (SVG)?
- How to add svg rectangles as background behind axis tick labels in d3js if ticks are inside chart
- why is arc labels blurred in my d3js pie chart?
- How can I put the Germany map on a svg in HTML? D3js
- How can I adjust the labels on a DC.js pie chart?
- How can I use d3 force to space out overlapping points on a map
- How can I wrap long text labels with D3.js?
- d3 - Bar Chart overlapping my text, how can I reduce the domain so it doesn't?
- SVG D3JS animation: how to make an arc " self-drawing"?
More Query from same tag
- Shapefile to TopoJSON conversion problems
- In Internet Explorer, how do I programmatically change the (displayed) value of a 'select' element?
- d3 parallel coordinates datetime axis
- d3 events issue with angular 2 typescript
- Tweening many arcs
- OnClick() Handler for D3 using a Websocket
- svg: child element alters its parent(svg container)'s size
- Prevent mouseout action after click on an element with D3.js
- d3.js not reading my JSON data from PHP file
- how to make ticks function work in d3.js?
- d3.js scaleTime is returning undefined
- d3.js graph in leaflet popup
- How to print different path colors depending on values?
- D3 Uncaught TypeError: Cannot read property 'age' of undefined
- D3 Bounded Panning
- How to assign different color to each node on a sunburst?
- d3 zoom: pan axis on scroll, pan axis on drag, zoom axis on pinch
- D3.js sorting the rows of a heatmap by column values - approaches?
- Open a d3 tree layout to show the node a user has searched for by typing request in a search box
- Rendering issue in d3.js bar graph
- D3.js spawn new circles at fixed time intervals with forceSimulation
- d3 version 4 circle pack passing in data
- DC.js - Select Menu as a filter for Composite charts
- attrTween function not being called
- Plotting normal density function with d3 js
- Trying to understand D3's selection.data() works
- How to attach properties other than x,y,y0 to a layer of streamgraph in d3?
- D3 force layout with CSS positioning
- d3 - attaching data to an axis for rescaling
- Data Visualization representation in Parallel Coordinates