Question

想象一条带珠子的项链。我需要一个可以帮助绘制这个的d3解决方案。我们使用过，组合项链和手镯：http://mathworld.wolfram.com/Necklace.html 但我们想扩展它。所以我看了一下，找到了Circle Polygon Intersection http://bl.ocks.org/mbostock/4218871

但是，我不知道Circle Polygon Intersection是否是最好的方法。我正在寻找有助于解决问题的d3.js中的建议和解决方案。

珠子/多边形的数量可以是100s或1000s，颜色不同。

Answer 1

我不知道你的问题是否与d3显示neckelaces有关。如果是这样，这是我的解决方案：

http://codepen.io/anon/pen/zqoqMj

function necklace (svg, radius, len) {
  // unit conversion
  var degrees = (pos) => pos * 360 / len
  var radians = (pos) => degrees(pos) * Math.PI / 180

  svg.append('svg:circle')
  .attr('r', radius).attr('fill', 'none')
  .attr('stroke', 'black')
  .attr('stroke-width', 2)

  // add circles (data is 0...len)
  svg.selectAll('.circles')
  .data(d3.range(0, len)).enter()
  .append('svg:circle')
    .attr('r', 10)
    .attr('cx', (pos) => radius * Math.cos(radians(pos)))
    .attr('cy', (pos) => radius * Math.sin(radians(pos)))
    .attr('fill', 'white')
    .attr('stroke', 'black')
    .attr('stroke-width', 2)
}

function svg (w, h) {
  return d3.select('body').append('svg')
    .attr('width', w)
    .attr('height', h)
    .append('svg:g')
    .attr('transform', 'translate(' + w / 2 + ',' + h / 2 + ')')
}

// create a necklace from a d3 svg object
necklace(svg(250, 250), 100, 16)

如何使用d3.js创建与圆/项链交叉的多边形？

1 个答案: