在甜甜圈图中使用TextPath绘制标签 [英] Drawing Labels using TextPath inside a donut chart

问题描述

我正在寻找D3中甜甜圈图的jsfiddle示例，其中

I am looking for a jsfiddle sample for a donut chart in D3, where

• 标签在圆弧内
• 标签在每个圆弧内居中
• 它们弯曲成弧形(如下图所示)

更新:到目前为止，这是我的代码 http://jsfiddle.net/gs5qp5sx/1/

Update: Here is my code so far http://jsfiddle.net/gs5qp5sx/1/

svg.selectAll("text").data(dataset.apples).enter()
        .append("text")
        .style("font-size",15)
        .style("fill","#F8F8F8")
        .attr("dy",0)
        .append("textPath")
        .attr("xlink:href",function(d,i){return "#s"+i;})
        .attr("startOffset","50%")
        .style("text-anchor","middle")
        .text(function(d,i){return "label"+i;})

您知道执行此操作的任何示例吗?

Do you know any sample that does this ?

推荐答案

http://bl.ocks. org/mbostock/3887193

http://www.kevlindev.com/tutorials/basics/text/svg/index.htm

希望此示例对您有所帮助！.

hope this samples help you!.

这篇关于在甜甜圈图中使用TextPath绘制标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！