javascript - 将多个 D3 圆排列成圆弧或半圆图案

Question

这是我的第一个 d3 可视化效果之一，它不是简单的条形图/折线图，所以如果这个问题看起来非常基本，我深表歉意。这是 fiddle :http://jsfiddle.net/maureenlinke/jMMSJ/

我有大约 100 个数据点，为每个数据点生成一个圆形 svg 元素。但是，我希望这些圆圈能够动态地排列成圆弧或半圆的形状。我不确定解决这个问题的最佳方法。将圆绑定(bind)到路径或圆弧？我希望这是动态的，所以我不想指定每个 cx 和 cy 坐标。我也尝试过变换/翻译选项，但这似乎也不起作用。这可能是一个简单的计算，但我只需要更好地理解整体方法。

var svg = d3.select("#chart").append("svg");


var circles = svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("transform", "translate(220,400) scale(1, -1)")
.attr("cx", function(d,i){return ((i*10)-1);})
.attr("cy", function(d,i){return (i*10);})
.attr("r", 6.15)
.attr("transform", "translate(50,50)");

Answer 1

您所需要的只是一些简单的三 Angular 函数来确定圆的 x 和 y 坐标:

.attr("cx", function(d,i){ return Math.cos(i / (data.length - 1) * cover) * circleRadius; })
.attr("cy", function(d,i){ return Math.sin(i / (data.length - 1) * cover) * circleRadius; })

这里，circleRadius 是点应位于的圆的半径，cover 是它们应覆盖的弧段(以弧度为单位)。这将从 3 点钟位置开始画圆，在本例中这可能不是您想要的 - 添加一个偏移量以使其成为“顶部”圆弧。

除此之外，您只需要平移容器元素以容纳圆圈即可。完整演示 here .