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

d3.js - 在hive图中添加轴标签

1 个答案: