d3 5+ - 围绕半圆或圆弧附加圆

Question

假设我们想要制作一个类似列表的视觉效果。为圆圈设置 y 逻辑可以很简单：

var data = [0,1,2,3,4,5,6,7,8,9];

var yScale = d3.scaleLinear()
    .range([height,0])
    .domain([0,9]);

svg.selectAll(null)
    .data(data)
    .enter()
    .append('circle')
    .attr('cy', function(d) { return yScale(d) })
    .attr('cx', 100)
    .attr('r', 10)
    .style('fill', "#a6a6a6");

但是，假设我们想要寻找一些风格点，而不是将圆排列成块状/表格排列，而是将它们排列成一个圆或弧形。我想到了这个结果（只关心外圈）：

虽然我认为 d3 确实有三角函数，但我从未见过它们用于像素坐标。我想象伪代码是这样的：

var semiCircleScale = d3.?????
    .range([250 degrees, 110 degrees])
    .domain([0,9]);

svg.selectAll(null)
    .data(data)
    .enter()
    .append('circle')
    .attr('cy', function(d) { return semiCircleScale(d) })
    .attr('cx', 100)
    .attr('r', 10)
    .style('fill', "#a6a6a6");

问题

是否有人熟悉使用圆/弧比例尺与 x,y 逻辑一起使用来附加形状？或者有 easier/less-math-intensive 方法吗？

Answer 1

所以想法是创建 2 条不同的弧路径，然后计算周长并将圆放在一起。

d3.svg.arc()
.append("path")
.attr("d", arc1)

这是一个 fiddle link 用最少的代码来建立这个想法 https://jsfiddle.net/Dibyanshu/g03p6sxj/

d3 5+ - 围绕半圆或圆弧附加圆

d3 5+ - Appending circles about a semi-circle or arc

javascript

d3.js

问题