d3用一条带连接弧和点

时间:2016-07-12 10:41:06

标签: javascript d3.js

给定一组构成圆的弧和在所述圆内生成的随机点,生成将阵列切片连接到其中一个点的区域或和弦的最佳方法是什么只是确切的中心?

我当时认为彩带或和弦布局在这里会有所帮助,但是和弦布局似乎特定于连接弧线(尽管我只花了大约两天时间研究它并且在实际使用中苦苦挣扎)

现在我有一个简单的任意弧和圆圈 -

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

简单的小提琴 - http://jsfiddle.net/968o4s9m/

1 个答案:

答案 0 :(得分:0)

似乎最好的方法是通过使用直线和圆弧输入所有点来手动绘制路径。丝带似乎无法连接我所知道的任意点和弧线。