向配置单元图添加轴标签

fnx2tebb 于 2021-06-26 发布在 Hive

关注(0)|答案(1)|浏览(365)

我正在关注mike bostock的hive plot实现：https://codepen.io/kevzhu/pen/lweeko
下面是javascript中指定轴长度和Angular 的部分。

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

当前代码在绘图的中间显示四个相互重叠的标签（source、source-target、target-source、target）。
我的问题是：如何将标签放置在Hive图中相应轴的旁边？

Hive d3.js Plot axis-labels

来源：https://stackoverflow.com/questions/49775366/d3-js-adding-axis-labels-to-hive-plot

1条答案

按热度按时间

9avjhtql1#

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

赞(0）回复(0）举报 2021-06-26

我来回答

向配置单元图添加轴标签

1条答案

相关问题

热门标签

最新问答