D3.js svg-在圆弧外对齐文本d3js

有人能帮我创建下面的图像使用d3js。我能够根据需要创建饼图，但仍然坚持使用箭头和其他方式渲染外部文本

据我所知，我已经用下面的代码实现了圆的创建

 var svg = d3.select("svg");
var margin = {top: 40, right: 45, bottom: 30, left: 40};
console.log(svg);
var width = svg.attr('width');

var height = svg.attr('height');


var radius = Math.min(width, height)/2;
var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var hoverStyle = {
    zindex: '2px'
};

var hoverExitStyle = {
    zindex: "0px"
}

var animateSpeed = 500;

// Define a Pie
var pie = d3.pie()
    .sort(null)
    .value(function(d) {return d.number});

// define pie section
var path = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

//
var label = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);

// Get pie sections based on the data.
var pieSections = pie(data);

var arc = g.selectAll('.arc')
    .data(pieSections)
    .enter().append("g")
    .attr("class", "arc")
    .append('a')
    .attr("href", function(d) { return d.data.url; });

arc.append("path")
    .attr("d", path).transition()
    .attr("fill", function(d) { return d.data.color; });

arc.append("text")
    .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
    .attr("dy", "0.35em")
    .text(function(d) { return d.data.title; });

---

文本和箭头是两个独立的关注点，可能值得他们提出自己的问题

曲线文本 要使用d3在路径上生成文本，您可能需要查看文档。这会有点棘手；基本上，您需要创建第二个外半径稍长的

d3.arc（）

生成器。使用较长的一个设置SVG的

defs

对象中

path

元素（您需要创建）的

d

属性，并从

textpath

元素（您也需要创建）中引用这些

path

元素的

id

s

曲线箭头

---

要实现这一点，您可能需要自己手动构造

d

属性（包括计算数学！），以添加适当的箭头（请参见SVG路径）。如果您正在制作静态图像，只需创建线条（同样，使用更长的半径

d3.arc（）

generator）并使用类似Illustrator或Inkscape的绘图程序导出SVG可能会更快，然后在那里加上箭头。

如果你支付相应的费用，肯定有很多人能够并且愿意帮助你解决这个问题。如果您想从Stack Overflow社区获得免费帮助，请花些时间学习如何提供帮助。本网站的规则要求你展示你的努力，并至少提供你的代码的相关部分。我将在将来注意所有规则，如果我在这里做错了什么，请接受我的道歉。这是我在stackoverflow中问的第一个问题。OP可能不知道这两个东西（曲线文本和箭头）的工作量；他们可能甚至不知道他们应该寻找的谷歌术语@Shubham，如果你用不同的措辞，你不会受到那么多的指责。。。i、 e.“我该如何创建这样的曲线标签？”你的措辞是，“为我做这两件困难的事。”总是带着学习的意图提问，而不是让别人给你一个解决方案前者帮助所有人，后者伤害所有人，包括您。@Shubham您可能会发现以下文章很有帮助：。