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

Question

我正在寻找一种在d3.js和弦图中拥有固定位置和宽度的方法。有没有办法做到这一点？

这是绘制和弦图时默认显示的方式：

这就是我希望顶部（第一组）显示的方式（比其他组更宽并且位于顶部）：

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; });