How to expand the only one piece of arc in d3.js?

Question

I'm trying to expand the inner element of arc, I have tried the below thing

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)+"%"; });

For expanding the inner arc I tried the following thing

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

But it is not working. Actually I have copied the code from here.

And I have tried this also

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")

Mikhail Shabrikov · Accepted Answer · 2017-11-14T16:21:24.107

Let's analyze your mistakes.

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

This code did not work because of you used jQuery selection, you must use d3 selection.

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

This code did not work because of you should return the function invocation result, not the function itself.

So rewrite your path variable this way:

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");

Check demo below:

var data = [96, 4];
var idname = '';
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");


var paths = g.append("path")
  .attr("d", function(dataItem, index, dataSet) {
   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");

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) + "%";
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.js"></script>
<div id="chart"></div>

Thanks for your answer. I'm trying to create the start the arc from right side with increasing both sides. But I'm not getting `.startAngle(function(d) { return d.startAngle + Math.PI/2; })` — mkHun, Nov 14 '17 at 16:30
I did not realize what the issue you are faced. Can you provide a link to the code on jsfiddle or another code sandbox? — Mikhail Shabrikov, Nov 14 '17 at 16:35

How to expand the only one piece of arc in d3.js?

1 Answers1