d3用彩带​​连接弧和点

Question

Given a set of arcs that make up a circle and random points generated inside of said circle, what's the best way to generate an area or chord that connects a slice of the array to one of the points and not just the exact center?

I was thinking that a ribbon or chord layout would be helpful here but the chord layout seems specific to connecting arcs (though admittedly I've only spent about two days researching it and am struggling with actual usage)

Right now I have a simple arbitrary arc and circle as such -

var width = 1000;
var height = 600;

var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")");

let arc = svg.append("path")
    .datum({
      id: 1,
      startAngle: 0,
      endAngle: .50 * (2 * Math.PI)
    })
    .style("fill", "blue")
    .attr("d", d3.arc()
      .innerRadius(180)
      .outerRadius(200))

let circle = svg.append("circle")
  .attr("cx", 0)
  .attr("cy", 0)
  .attr("gradientUnits", "objectBoundingBox")
  .attr("r", 20);

Simple fiddle - http://jsfiddle.net/968o4s9m/

Answer 1

Seems the best way is to draw a path manually by entering all points using lines and arcs. Ribbons do not appear to be able to connect arbitrary points and arcs from what I can tell.