Question

我目前正在D3JS中构建一个旭日图表，并尝试将圆圈附加到每个节点。您可以在此处查看当前项目：https://jsfiddle.net/mhxuo260/。

我正在尝试将每个圆圈放在各自节点的右上角。目前，它们仅位于覆盖节点标签的中心。我一直在寻找线索，但还没有拿出任何东西。任何建议都将不胜感激。

d3.json("flare.json", function(error, root) {
if (error) throw error;

var g = svg.selectAll("g")
    .data(partition.nodes(root))
    .enter().append("g");

path = g.append("path")
    .attr("d", arc)
    .attr('stroke', 'white')
    .attr("fill", function(d) { return color((d.children ? d : d.parent).name); })
    .on("click", magnify)
    .each(stash);

var text = g.append("text")
    // .attr("x", function(d) { return d.x; })
    // .attr("dx", "6") // margin
    // .attr("dy", ".35em") // vertical-align
    .text(function(d) {
        return d.name;
    })
    .attr('font-size', function(d) {
        return '10px';
    })
    .attr("text-anchor", "middle")
    .attr("transform", function(d) {
        if (d.depth > 0) {
            return "translate(" + arc.centroid(d) + ")" +
                   "rotate(" + getStartAngle(d) + ")";
        } else {
            return null;
        }
    })
    .on("click", magnify);

var circle = g.append('circle')
    .attr('cx', function(d) { return d.x })
    .attr('cy', function(d) { return d.dy; })
    .attr('r', '10')
    .attr('fill', 'white')
    .attr('stroke', 'lightblue')
    .attr("transform", function(d) {
        console.log(arc.centroid(d))
        if (d.depth > 0) {
            return "translate(" + arc.centroid(d) + ")" +
                   "rotate(" + getStartAngle(d) + ")";
        } else {
            return null;
        }
    });

Answer 1

你正在使用'''arc.centroid'''函数，它总是返回弧的x，y中点。所有这项功能都是：

The midpoint is defined as (startAngle + endAngle) / 2 and (innerRadius + outerRadius) / 2

您只需根据您想要的位置使用这些值计算不同的位置。使用像这样的变换（sudo代码）：

.attr( "transform", function(d) {
        var x = (startAngle + endAngle) / 2;
        var y = (innerRadius + outerRadius) / 2;

        return "translate(" + x +"," + y + ")";
    });

您无需旋转圆圈。

（仅供参考：javascript会通过用逗号连接每个数字将数组转换为字符串，这就是为什么返回数组的arc.centroid在这里工作的原因）

如何使用transform属性更改circle svg元素的位置？

1 个答案: