CODEWITHSUNDEEP
d3.js
Colin
Colin

Reputation: 255

D3 Pie Chart rotate only the arcs

My chart needs a label in the center of the donut that should not rotate when clicked.

https://codepen.io/scratchy303/pen/dyXMzrz

Can I append the label in a sibling "g"roup and rotate the arcs group? Can I translate just the arcs rather than rotating the entire SVG? What's the simplest solution?

var svg = d3.select("#pieChart").append("svg")
  .attr("width", '100%')
  .attr("height", '100%')
  .attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
  .attr('preserveAspectRatio', 'xMinYMin')
  .append("g")
  .attr("transform", "translate(" + radius + "," + height / 2 + ")")
  .style("filter", "url(#drop-shadow)");

svg.append("g")
  .append("text")
  .attr("text-anchor", "middle")
    .text("Donut Name");

Upvotes: 0

Views: 40

Answers (1)

Colin
Colin

Reputation: 255

I found a solution by counter-rotating my text. My biggest hurdle was simply traversing my SVG in D3.

//start by selecting the parent "g"roup and then you can select the text
d3.select(i.parentNode).select(".donut-label")
    .transition()
    .duration(1000)
    .attr("transform", "rotate(" + (-angle) + ")");

Upvotes: 0

Related Questions