如何在Arc的末尾添加图像

问题描述

我正在使用d3 js，我必须在圆弧的末端显示图像，下面是我的示例如何实现

var total_codes = 8;
var remaining_codes = 4;
var issued = total_codes - remaining_codes;
var coloursArray = ["#128ED2","#dadada"];
var dataset = {
  privileges: [issued,remaining_codes]
};

var width = 160,height = 160,radius = Math.min(width,height) / 2;

var color = d3.scale.ordinal()
  .range(coloursArray);

var pie = d3.layout.pie()
  .sort(null);

var arc = d3.svg.arc()
  .innerRadius(radius - 30)
  .outerRadius(radius);

var svg = d3.select("#donut").append("svg")
  .attr("width",width)
  .attr("height",height)
  .append("g")
  .attr("transform","translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.selectAll("path")
  .data(pie(dataset.privileges))
  .enter().append("path")
  .attr("fill",function(d,i) {
    return color(i);
  })
  .attr("d",arc);
path.transition().duration(750);

var point = path.node().getPointAtLength(path.node().getTotalLength() / 2);

svg.append("image")
  .attr("cx",point.x)
  .attr("cy",point.y)
  .attr({
    "xlink:href": "http://run.plnkr.co/preview/ckf41wu0g00082c6g6bzer2cc/images/pacman_active_icon.png",//nothing visible
    width: 35,height: 36
  });

svg.append("text")
  .attr("dy",".0em")
  .style("text-anchor","middle")
  .attr("class","inside")
  .html(function() {
    return "<tspan x='0' dy='0em'>External</tspan><tspan x='0' dy='1.2em'>Privileges</tspan>";
  }); // Add your code here

<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="donut"></div>

解决方法

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

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

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