代码之家 › 专栏 › 技术社区 › Adewan09

d3。js-将轴标签添加到配置单元打印

axis-labels hive plot d3.js

Adewan09 · 技术社区 · 8 年前

我正在关注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);

当前代码显示四个标签(源、源目标、目标源、目标),这些标签在绘图的中间相互重叠。

我的问题:如何在配置单元图中将标签放置在各个轴旁边?

1 回复 | 直到 8 年前

moon3stars 7 年前

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

推荐文章

Victor Wong · 如何迭代列A以有条件地对列B求和?

1 年前

StripyTiger · 从配置单元中的列表检索元素

2 年前

mfcss · SQL:使用年/月/日分区查询某个时间段的数据

2 年前

MOMO · 配置单元重命名具有分区的表中的列

2 年前

Minnu · json结构类型加载到配置单元

2 年前

PPSATO · 替代在AWS Athena中使用last_value和first_value

2 年前

te time · 按组获取完整的行集

2 年前

MattRgx · 配置单元中的Regexp将一列拆分为3列

4 年前

mishalhaneef · 如何更新蜂箱颤振数据

4 年前

Bhanuchander Udhayakumar · 为什么spark sql的cpu利用率高于hive?

8 年前