时间戳

首页 > 解决方案 > D3饼图只旋转弧线

d3.js - D3饼图只旋转弧线

问题描述

我的图表需要在甜甜圈中心有一个标签，单击时不应旋转。

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

我可以在同级“g”组中附加标签并旋转弧组吗？我可以只翻译圆弧而不是旋转整个 SVG 吗？最简单的解决方案是什么？

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");

标签： d3.js

解决方案

我通过反向旋转我的文字找到了解决方案。我最大的障碍就是在 D3 中遍历我的 SVG。

//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) + ")");

推荐阅读