可缩放圆包上的"d3圆文字" [英] 'd3-circle-text' on zoomable circle-pack

问题描述

'd3-circle-text'插件在静态圆形包装上效果很好(非常感谢musically-ut为

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 the g.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圆文字"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！