问题描述
'd3-circle-text'插件在静态圆形包装上效果很好(非常感谢musically-ut为 https://github.com/musically-ut/d3-circle-text ).但是,在可缩放的圆形包装上,标签会在该位置周围飞行(在小提琴中,它们保持静态,不会在缩放时重新定位).
The 'd3-circle-text' plug-in works great on a static circle-pack (many thanks to musically-ut for contributing https://github.com/musically-ut/d3-circle-text). However, on a zoomable circle-pack, labels fly about the place (in the fiddle, they stay static not repositioning on zoom).
是否可以使圆形文本随圆形缩放? (如果该插件不可缩放,那没关系.我将尝试另一种标记方法.)
Is it possible to get the circle-text to zoom with the circles? (If the plug-in isn't zoomable, that's ok. I'll try another labelling approach.)
这是我正在处理的代码部分:
Here's the code section I'm working on:
////////////Circle text
var circleText = d3.circleText()
.radius(function(d) {
return d.r - 5;
})
.value(function(d) {
return d.key; //Get lables
})
.method('align')
.spacing('exact')
.precision(0.1)
.fontSize('100%');
var gTexts = svg.selectAll('g.label')
.data(pack.nodes) //Returns names
.enter()
.append('g')
.classed('label', true)
.attr('transform', function(d) {
return 'translate(' + d.x + ',' + d.y + ')';
});
/*.attr("x", function (d) { return d.x; })
.attr("y", function (d) { return d.y; }); */ An attempt - not working
/*.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; }); */ An attempt - not working
//Only put on 'parent' circles
gTexts.filter(function(d) {
return !!d.children;
})
.call(circleText)
//.style('fill', 'white');
这是一个完整的小提琴: http://jsfiddle.net/cajmcmahon/9a5xaovv/1/
Here's a full fiddle: http://jsfiddle.net/cajmcmahon/9a5xaovv/1/
感谢您的帮助.
推荐答案
布局生成已简化,现在可以正确处理过渡.
The the layout generation has been simplified and it now handles transitions correctly.
更新的小提琴: http://jsfiddle.net/nxmkoo95/
- 将
circleText
的定义提升到最高级别,并删除对.precision
的调用. - 使用类
.leaf-label
来标识必须手动移动的文本标签. - 添加了一个调用以更新
circleText
的半径函数并将g.label
移动到正确的位置.
- Hoisted the definition of
circleText
to the top level and removed the call to.precision
. - Used a class
.leaf-label
to identify the text labels which had to be manually moved. - Added a call to update the radius function of
circleText
and moved theg.label
to the correct place.
function zoom(d, i) {
var k = r / d.r / 2;
x.domain([d.x - d.r, d.x + d.r]);
y.domain([d.y - d.r, d.y + d.r]);
var t = svg.transition()
.duration(d3.event.altKey ? 7500 : 750);
t.selectAll("circle")
.attr("cx", function(d) {
return x(d.x);
})
.attr("cy", function(d) {
return y(d.y);
})
.attr("r", function(d) {
return k * d.r;
});
circleText.radius(function (d) { return k * d.r - 5.0; });
t.selectAll('g.label')
.attr('transform', function (d) {
return "translate(" + x(d.x) + ',' + y(d.y) + ')';
})
.filter(function (d) { return !!d.children; })
.call(circleText);
t.selectAll(".leaf-label")
.attr("x", function(d) {
return x(d.x);
})
.attr("y", function(d) {
return y(d.y);
})
.style("opacity", function(d) { return k * d.r > 20 ? 1 : 0; });
node = d;
d3.event.stopPropagation();
}
这篇关于可缩放圆包上的"d3圆文字"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!