CODEWITHSUNDEEP
javascriptd3.js
Ioan Ungurean
Ioan Ungurean

Reputation: 329

How can I draw simple lines (flows) between arcs in D3.js?

This is my circle. I want to draw flow lines between the circle arcs. How can I do it in D3.js.

FYI I know about https://bl.ocks.org/mbostock/4062006. What I want is instead of those wide chords I want simple lines like so.

enter image description here

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

var arcData = [
  {startAngle: 0, endAngle: 1.3},
  {startAngle: 1.3, endAngle: 2.6},
  {startAngle: 2.6, endAngle: 3},
  {startAngle: 3, endAngle: 4},
  {startAngle: 4, endAngle: 2* Math.PI}
];

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

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

Upvotes: 0

Views: 590

Answers (2)

Ioan Ungurean
Ioan Ungurean

Reputation: 329

// draw the flow line
let flowLine = d3.line()
  .x((d) => { return d.x; })
  .y((d) => { return d.y; })
  .curve(d3.curveBundle.beta(0.5));

// append each flow to the svg
layer0.selectAll('.flow')
  .data(arrayOfCoordinates) // [[{1, 1},{{2, 2}}][{3, 3},{{4, 5}}]] - centroid coordinates for arcs in the circle
  .enter().append('path')
  .style('fill', 'none')
  .style("stroke", '#000')
  .style('stroke-width', '1px')
  .attr('d', flowLine);

For more details:

Upvotes: 0

user3432422
user3432422

Reputation: 1369

I think you should be able to use a d3.ribbon() generator - https://github.com/d3/d3-chord/blob/master/README.md#ribbon.

Just pass the same value for startAngle and endAngle for the source and target parameters, and it will give you a path string which you can set as path element data.

Upvotes: 1

Related Questions