Question

＆＃39; d3-circle-text＆＃39;插件在静态circle-pack上运行得很好（非常感谢musically-ut贡献https://github.com/musically-ut/d3-circle-text）。但是，在可缩放的圆形包装上，标签围绕着地方飞行（在小提琴中，它们保持静止而不是在缩放时重新定位）。

是否可以通过圆圈缩放圆圈文字？（如果插件不可缩放，那没关系。我会尝试其他标签方法。）

以下是我正在处理的代码部分：

这是一个完整的小提琴：http://jsfiddle.net/cajmcmahon/9a5xaovv/1/

感谢您的帮助。

Answer 1

我已在musically-ut/d3-circle-text

更新了该插件

布局生成已经简化，现在可以正确处理转换。

更新的小提琴：http://jsfiddle.net/nxmkoo95/

值得注意的变化

将circleText的定义提升到顶层并删除了对.precision的调用。
使用类.leaf-label来标识必须手动移动的文本标签。
添加了一项调用以更新circleText的半径函数，并将g.label移至正确的位置。

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

＆＃39; D3的圆文本＆＃39;在可缩放的圆形包装上

1 个答案:

值得注意的变化