Question

这是我的第一个d3可视化之一，它不是一个简单的条形图/折线图，所以如果这个问题看起来非常基本，那么道歉。这是小提琴：http://jsfiddle.net/maureenlinke/jMMSJ/

我有大约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)");

Answer 1

您只需要一些简单的三角法来确定圆圈的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。

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

1 个答案: