弦图中的D3.js固定位置组

Question

我正在寻找一种方法，有一个固定的位置和宽度的一组在一个d3.js和弦图。有办法这样做吗？

--默认情况下，这是绘制chord图时的方式：

​

​

，这就是我希望顶部(第一组)显示的方式(比其他组宽，中心在顶部)：

​

​

Answer 1

如果你有一个固定的数据集，那么你知道要旋转多少才能得到你想要的位置。

我在这个例子中应用了旋转：http://bl.ocks.org/mbostock/4062006

因此，它将成为您提议的图表中非常重要的一部分：http://jsfiddle.net/cyril123/L9s2dpxt/。

要做到这一点，您需要给主要g组轮换如下：

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")rotate(100)");

//将其旋转100度，但根据数据集的不同，这是您的选择。

接下来是文本的旋转，这是由以下代码控制的。

ticks.append("text")
    .attr("x", 8)
    .attr("dy", ".35em")
    .attr("transform", function(d) { return d.angle > Math.PI ? "translate(16)" : null; })//I am just giving translate no rotation
    .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
    .text(function(d) { return d.label; });