CODEWITHSUNDEEP
javascriptd3.js
Ioan Ungurean
Ioan Ungurean

Reputation: 329

How can I make an arc thiker than the other in D3.js

My circle has 2 arcs, I want one arc to be thicker than the other. Here is my code: 

var arcGenerator = d3.arc()
  .innerRadius(80)
  .outerRadius(100)
  .padAngle(.02)
  .padRadius(100);

var arcData = [
  {startAngle: 0, endAngle: 1.2},
  {startAngle: 1.2, endAngle: 2* Math.PI}
];

d3.select('g')
  .selectAll('path')
  .data(arcData)
  .enter()
  .append('path')
  .attr('d', arcGenerator);

Here is the codepen: http://codepen.io/ioan-ungurean/pen/aJNWMM

Upvotes: 2

Views: 83

Answers (1)

A Wilbur
A Wilbur

Reputation: 91

You can change either the innerRadius or the outerRadius of the arc you want to be thicker.

Here is an example where I made one arc thinner by changing the innerRadius:

// Remove innerRadius from this statement...
var arcGenerator = d3.arc()
    .outerRadius(100)
    .padAngle(.02)
    .padRadius(100)
    .cornerRadius(4);

// ...and add innerRadius here with different values for each arc
var arcData = [
    {startAngle: 0, endAngle: 2.3, innerRadius: 50},
    {startAngle: 2.3, endAngle: 2* Math.PI, innerRadius: 80}
];

d3.select('g')
    .selectAll('path')
    .data(arcData)
    .enter()
    .append('path')
    .attr('d', arcGenerator);

Codepen: http://codepen.io/anon/pen/XMdgbG

Upvotes: 3

Related Questions