Javascript 如何扩展d3.js中唯一的一段弧？

我试着扩展arc的内部元素，我试过下面的东西

var data = [96,4];
var svg = d3.select("body").append("svg")
.attr("width", "400")
.attr("height", "400")
.attr("id","table_pie_"+idname);

var width = 500,
    height = 700,
    radius = 100;

svgid = d3.select("#table_pie_"+idname);

var colors = ["#06f","#099","#548235","#ED7D31","#C30","rgb(244,189,23)"];
var color = d3.scaleOrdinal()
    .range(colors);

var arc = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

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

var pie = d3.pie()
    .sort(null)
    .value(function(d) { return d; });

  var arcOver = d3.arc()
      .innerRadius(0)
      .outerRadius(150 + 10);


 var svg = svgid.append("g")
    .attr("transform", "translate(100 200)");
i = 0;
  var g = svg.selectAll(".arcH")
      .data(pie(data))
    .enter().append("g")
      .attr("class", "arcH");


  g.append("path")
      .attr("d", arc)
      .style("fill", function(d) { m=i; i++; return colors[m]; })
    .attr("stroke", "white")
    .attr("stroke-width", "5")
    ;

  g.append("text")
      .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
      .attr("dy", ".30em")
      .attr("fill", "white")
      .style("font"," 13px 'Tw Cen MT Condensed'")
      .style("text-anchor","middle")    
      .text(function(d) { return d.data.toFixed(2)+"%"; });

为了扩大内弧，我尝试了以下方法

$( ".arcH path" ).last().attr( "d",  arcOver);

但它不起作用。实际上，我已经从中复制了代码

我也试过这个

g.append("path")
.attr("d", function(d){if(i==0){ return arc; } else{ return arcOver;} })
.style("fill", function(d) { m=i; i++; return colors[m]; })
.attr("stroke", "white")
.attr("stroke-width", "5")

---

让我们分析一下你的错误

$( ".arcH path" ).last().attr( "d",  arcOver);

这段代码不起作用，因为您使用了jQuery选择，您必须使用d3选择

g.append("path")
  .attr("d", function(d){if(i==0){ return arc; } else{ return arcOver;} })

此代码不起作用，因为您应该返回函数调用结果，而不是函数本身

因此，请按以下方式重写path变量：

var paths = g.append("path")
  .attr("d", function(dataItem, index, dataSet) {
    // here we get one of arc functions by index
    // if it is the last sector we use arcOver
    var currentArc = index === dataSet.length - 1 ? arcOver : arc;

    return currentArc(dataItem)
  })
  .style("fill", function(d, i) { return colors[i]; })
  .attr("stroke", "white")
  .attr("stroke-width", "5");

查看下面的演示：

var数据=[96,4]； 变量idname=； var svg=d3.selectbody.appendsvg .宽度，400 .身高，400 .attrid，table\u pie\uu+idname； 可变宽度=500， 高度=700， 半径=100； svgid=d3.selecttable\u pie\uu+idname； 变量颜色=[06f099548235，ED7D31，C30，rgb244189,23]； var color=d3.scaleOrdinal .颜色； var arc=d3.arc .外部半径-10 .内半径0； var labelArc=d3.arc .Outerradius半径-40 .内半径半径-40； 变量pie=d3.pie 索特努尔先生 .价值函数{ 返回d； }; var arcOver=d3.arc .innerRadius0 .外层150+10； var svg=svgid.appendg .attransform，translate100 200； i=0； var g=svg.selectAll.arcH .datapiedata .enter.appendg .高级，拱门； var path=g.appendpath .attrd、functiondataItem、索引、数据集{ var currentArc=index==dataSet.length-1？arcOver:arc； 返回currentArcdataItem } .stylefill，函数，i{ 返回颜色[i]； } .白色 .笔划宽度，5； g、 附录文本 .attr转换，函数{ 返回translate+labelArc.centroidd+； } .attrdy，.30em .白色 .stylefont，13px“Tw Cen MT浓缩版” .styletext定位符，中间 .textfunctiond{ 返回d.data.toFixed2+%； };

---

谢谢你的回答。我试图创建从右边开始的弧，两边都增加。但是我不明白。startAngle函数{return d.startAngle+Math.PI/2；}我没有意识到你面临的问题是什么。您可以提供一个链接到JSFIDLE或其他代码沙盒上的代码吗？