我正在尝试构建一个 d3 甜甜圈图，我想分割每个弧线并在弧线之间显示值，并且我还尝试在甜甜圈内添加 img

问题描述

import * as d3 from "d3";

class App extends Component {

  render() {
    var dataset = [{
      color: "red",value: 20,image:'https://www.shutterstock.com/image-photo/waves-water-river-sea-meet-each-1529923664'
    },{
      color: "violet",value: 30
    },{
      color: "orange",value: 40
    },{
      color: "green",value: 10
    }];
    
    var width = 460,height = 300,radius = Math.min(width,height) / 2;
    
    // var color = d3.category20();
    
    var pie = d3.pie().padAngle(0.1)
      .sort(null).value(function(d) {
        return d.value;
      });;
    
    var arc1 = d3.arc()
    /*   .innerRadius(radius - 18)
      .outerRadius(radius - 13);
       */
    var arc = d3.arc()
      .innerRadius(radius - 20)
      .outerRadius(radius - 10);
    
    var svg = d3.select("body").append("svg")
      .attr("width",width)
      .attr("height",height)
      .append("g")
      .attr("transform","translate(" + width / 2 + "," + height / 2 + ")");
    
    var path = svg.selectAll(".background")
      .data(pie([{
        color: "white",value: 1
      }]))
      .enter().append("path")
      .attr("class","background")
      .attr("fill",function(d,i) {
        return d.data.color;
      })
      .attr("d",arc1);
    
    var path = svg.selectAll(".foreground")
      .data(pie(dataset))
      .enter().append("path")
      .attr("class","foreground")
      .attr("stroke-linejoin","round")
      .attr("stroke-linecap","round")
      .attr("stroke-width","10")
      .attr("stroke","none")
      .attr("stroke",i) {
        return d.data.color;
      })
      .attr("fill","none")
      .attr("d",arc);
      
    /* svg.append("text")
      .text("20/12")
      .attr("class","units-label") */
      
    // var imgs = svg.selectAll("image").data([0].image);
    //             imgs.enter()
    //             .append("svg:image")
    
  
 
return <div className="body"></div>

  }
}

export default App;

使用附加的代码，我可以获得圆环图，我如何拆分每个弧并在其中显示值，并且我正在尝试在圆环图中添加图像，我尝试了多种方法来附加图像标记属性但它不起作用，如何克服这个问题，我尝试添加一个在甜甜圈内工作得很好的文本

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）