以圆弧或半圆图案对齐多个D3圆形

这是我的第一个d3可视化之一，它不是一个简单的条形图/折线图，所以如果这个问题看起来很基本，请致歉。这里的小提琴：http://jsfiddle.net/maureenlinke/jMMSJ/以圆弧或半圆图案对齐多个D3圆形

我有大约100个数据点，每个我生成一个圆svg元素。但是，我希望圆形以弧形或半圆形的形状动态排列。我不确定最好的方式去做这件事。将圆圈绑定到路径或圆弧？我想这是动态的，所以我不想指定每个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)");

来源

2014-05-01 mtown

所有你需要的是一些简单的三角学来确定圆的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。

来源

2014-05-01 14:57:08

谢谢拉尔斯，这真的很有帮助。如果我想在刚绘制的半圆内创建一个新的圆，我会怎么做？由于它的数据点超过100个，圆圈必须非常宽以容纳所有这些数据点，因此我想将它们嵌套在一起。 – mtown

您只需更改新“行”的圆弧半径。 –

我明白这一点，但如果行是数据的延续，而不是单独的一行新数据 - 你怎么表示？说如果数据[i]> 100开始一个新的圈子？ – mtown

以圆弧或半圆图案对齐多个D3圆形

回答

相关问题