d3.js - 将轴标签添加到蜂巢图

Question

我正在关注 Mike Bostock 的 Hive Plot 实施： https://codepen.io/kevzhu/pen/LWeEKO

下面是指定轴长度和角度的javascript部分。

var innerRadius = 50, outerRadius = 200, 
majorAngle = 2 * Math.PI / 3, minorAngle = 1 * Math.PI / 12;

var angle = d3.scale.ordinal()
.domain(["source", "source-target", "target-source", "target"])
.range([0, majorAngle - minorAngle, majorAngle + minorAngle, 2 * majorAngle]);

svg.selectAll(".axis")
.data(nodesByType)
.enter().append("line")
.attr("class", "axis")
.attr("transform", function(d) { return "rotate(" + degrees(angle(d.key)) + ")"; })
.attr("x1", radius(-2))
.attr("x2", function(d) { return radius(d.count + 2); });`

我在实现中添加了以下代码行。

var angleLabel = d3.svg.axis().scale(angle);
svg.append("g").attr("class","axis").call(angleLabel);

当前代码显示四个标签（源、源-目标、目标-源、目标）在图的中间相互重叠。

我的问题：如何在蜂巢图中将标签放置在相应轴旁边？

Answer 1

var  localPoint = el.getPointAtLength(el.getTotalLength()),  //el is axis line
           transformedPoint = transformPoint(el, localPoint);  
function transformPoint(el, point) { 
    localMatrix = el.viewportElement.createSVGMatrix(),
    localTransformList = el.transform.baseVal;
     // is there at least one entry?
    if (localTransformList.length) {
        // consolidate multiple entries into one
        localMatrix = localTransformList.consolidate().matrix;
    }   
     return transformedPoint = point.matrixTransform(localMatrix); 
}