D3.js 如何在弧的末端添加图像
我使用的是D3JS，我必须在弧的末端显示图像，下面是我的示例，我如何实现这一点 var总代码=8； var剩余_代码=4； 发出的var=总的\u代码-剩余的\u代码； var colorsarray=[128ED2，dadada]； 变量数据集={ 特权：[已发布，剩余的_代码] }; 可变宽度=160， 高度=160， 半径=数学最小宽度，高度/2； var color=d3.scale.ordinal .萨雷； var pie=d3.layout.pie 索特努尔先生； var arc=d3.svg.arc .内半径半径-30 .外半径； var svg=d3.selectdonut.appendsvg .宽度，宽度 .身高，身高 .附录 .attransform，translate+宽度/2+，+高度/2+； var path=svg.selectAllpath .datapiedataset.privileges .enter.appendpath .attrfill，functionad，i{ 返回颜色i； } .attrd，arc； path.transition.duration750； var point=path.node.getPointAtLengthpath.node.getTotalLength/2； svg.appendimage .x点 .消耗，点.y 艾特先生{ xlink:href:http://run.plnkr.co/preview/ckf41wu0g00082c6g6bzer2cc/images/pacman_active_icon.png，//什么也看不见 宽度：35， 身高：36 }; svg.appendtext .attrdy，.0em .styletext定位符，中间 .ATTR类，内部 .htmlfunction{ 返回外部特权； }; // 在这里添加您的代码D3.js 如何在弧的末端添加图像,d3.js,automatic-ref-counting,D3.js,Automatic Ref Counting,我使用的是D3JS，我必须在弧的末端显示图像，下面是我的示例，我如何实现这一点 var总代码=8； var剩余_代码=4； 发出的var=总的\u代码-剩余的\u代码； var colorsarray=[128ED2，dadada]； 变量数据集={ 特权：[已发布，剩余的_代码] }; 可变宽度=160， 高度=160， 半径=数学最小宽度，高度/2； var color=d3.scale.ordinal .萨雷； var pie=d3.layout.pie 索特努尔先生； var arc=
这有点乏味，但下面的方法很有效 取pieData的第一个元素，它表示蓝色弧。然后使用三角法计算偏移量，将pacman放置在正确的位置。最后，首先平移它，使其围绕中心旋转，然后旋转所需的量 我把它放在距离中心半径-15的位置，因为那是30像素宽圆弧的中间 var总代码=8； var剩余_代码=5； 发出的var=总的\u代码-剩余的\u代码； var colorsarray=[128ED2，dadada]； 变量数据集={ 特权：[已发布，剩余的_代码] }; 可变宽度=160， 高度=160， 半径=数学最小宽度，高度/2， iconSize=48； var color=d3.scale.ordinal .萨雷； var pie=d3.layout.pie 索特努尔先生； var arc=d3.svg.arc .内半径半径-30 .外半径； var svg=d3.selectdonut.appendsvg .宽度，宽度 .身高，身高 .附录 .attransform，translate+宽度/2+，+高度/2+； var pieData=piedataset.privileges； var path=svg.selectAllpath .datapieData .enter.appendpath .attrfill，functionad，i{ 返回颜色i； } .attrd，arc； path.transition.duration750； svg .附加“g” .attr'class'，'pacmancontainer' .样式“转换”，功能{ //弧的中心半径，也是三角形的假设 var meanRadius=半径-15； var angleRadians=pieData[0]。endAngle-Math.PI/2； var xOffset=Math.cosangleRadians*平均半径； var yOffset=数学正弦角度弧度*平均半径； 返回translate+xOffset+px，+yOffset+px； } .appendimage 艾特先生{ xlink:href:http://run.plnkr.co/preview/ckf41wu0g00082c6g6bzer2cc/images/pacman_active_icon.png，//什么也看不见 宽度：iconSize， 高度：iconSize } //确保Pacman围绕其中心旋转 .style'transform-origin'，iconSize/2+'px'+iconSize/2+'px' .样式“转换”，功能{ var angleDegrees=pieData[0].endAngle/2*Math.PI*360； 返回平移-+iconSize/2+px，-+iconSize/2+px旋转+角度度+度； }; svg.appendtext .attrdy，.0em .styletext定位符，中间 .ATTR类，内部 .htmlfunction{ 返回外部特权； }; // 在这里添加您的代码
也许有相关的答案？可以从“路径”属性中获取位置，然后确定图像的位置。提供代码，以便我们可以提供帮助。很抱歉，回复太晚，您可以查看此链接中的示例。Pac man图像需要旋转，图像需要显示弧的末端。非常感谢Ruben Helsloot它的工作很好，您节省了我的时间。