d3 旭日图选择旋转不起作用

Question

我正在创建一个 d3 sunburst 图表，它需要集成一个选择旋转，例如这里看到的那个：http://bl.ocks.org/musically-ut/4678148 with a selection distortion (zooming only partially into a selected path). I have created a jsFiddle: https://jsfiddle.net/h943x6yu/ 这突出了我将两者结合起来的尝试。此图表会扭曲和旋转，但旋转是不可预测的。我希望所选路径旋转到顶部 12 点钟位置，而不管它在图表上的位置如何（如第一个 link 所示）。如有任何建议，我们将不胜感激。

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)
    .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
    .on("click", magnify)
    // .on('mouseover', tip.show)
    // .on('mouseout', tip.hide)
    .each(stash);

var text = g.append("text")
    .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
    .attr("x", function(d) { return y(d.y); })
    .attr("dx", "6") // margin
    .attr("dy", ".35em") // vertical-align
    .text(function(d) {
        return d.name;
    })
.attr('font-size', function(d) {
    if (d.value < 100000) {
        return '10px'
    } else {
        return '20px';
    }
})
.on("click", magnify);

var innerG = d3.selectAll("g.inner");



// Distort the specified node to 80% of its parent.
function magnify(node) {
    text.transition().attr("opacity", 0);
    spin(node);

    if (parent = node.parent) {
        var parent,
            x = parent.x,
            k = 0.8;
        console.log(x)
        parent.children.forEach(function(sibling) {
            x += reposition(sibling, x, sibling === node
              ? parent.dx * k / node.value
              : parent.dx * (1 - k) / (parent.value - node.value));
        });
    } else {
        reposition(node, 0, node.dx / node.value);
    }

    path.transition()
    .duration(750)
    .attrTween("d", arcTween)
    .each("end", function(e, i) {
      // check if the animated element's data e lies within the visible angle span given in node
        if (e.x >= node.x && e.x < (node.x + node.dx)) {
        // get a selection of the associated text element
            var arcText = d3.select(this.parentNode).select("text");
        // fade in the text element and recalculate positions
            arcText.transition().duration(750)
            .attr("opacity", 1)
            .attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" })
            .attr("x", function(d) {
                return y(d.y);
            });
        }
    });

}

function spin(d) {
    var newAngle = - (d.x + d.dx / 2);

    innerG
      .transition()
        .duration(1500)
        .attr("transform", "rotate(" + ((180 / Math.PI * newAngle) - 90) + ")");

    path
      .classed("selected", function (x) { return d.name == x.name; });
}

// Recursively reposition the node at position x with scale k.
function reposition(node, x, k) {
    // console.log(node)
    node.x = x;
    if (node.children && (n = node.children.length)) {
        var i = -1, n;
        while (++i < n) x += reposition(node.children[i], x, k);
    }
    return node.dx = node.value * k;
}

// Stash the old values for transition.
function stash(d) {
    d.x0 = d.x;
    d.dx0 = d.dx;
}

// Interpolate the arcs in data space.
function arcTween(a) {
    var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
    return function(t) {
        var b = i(t);
        a.x0 = b.x;
        a.dx0 = b.dx;
        return arc(b);
    };
};
});

Answer 1

好吧，我经过大量修改后弄明白了。我不知道这是否是最佳解决方案，但它确实有效。

我像这样设置 x 和 y 变量：

var x = d3.scale.linear()
    .range([0, 2 * Math.PI]);

var y = d3.scale.linear()
    .range([0, radius]);

然后我这样设置弧度：

var arc = d3.svg.arc()
    .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
    .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
    .innerRadius(function(d) { return Math.max(0, y(d.y)) })
    .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)) })
    .cornerRadius(function(d) { return 5;});

以上是我原来的 jsFiddle 示例。

当我的原始旋转函数被调用 (onClick) 时，它运行像这样：

function spin(d) {
        var newAngle = - (d.x + d.dx / 2);
        console.log('newAngle', newAngle)

        innerG
          .transition()
            .duration(1500)
            .attr("transform", "rotate(" + ((180 / Math.PI * newAngle) - 90) + ")");


    path
      .classed("selected", function (x) { return d.name == x.name; });
}

这给了我一个不可预测的旋转。稍微修修补补后，我意识到如果我运行通过之前实例化的 x 变量形成自旋 t运行s，然后单击自旋两次，它每次都会校正到 - 90 度。此时我将 -90 放在 t运行sform 上并创建了一个 promise/then 函数到运行它两次：

function spin(d) {

    var spin1 = new Promise (function(resolve, reject) {
        var newAngle = - x(d.x + d.dx / 2);
        console.log('newAngle', newAngle)

        innerG
          .transition()
            .duration(1500)
            .attr("transform", "rotate(" + ((180 / Math.PI * newAngle)) + ")");
            resolve("Success!");
    });

    spin1.then(function() {
        var newerAngle = - x(d.x + d.dx / 2);
        console.log('newerAngle', newerAngle)

        innerG
          .transition()
            .duration(1500)
            .attr("transform", "rotate(" + ((180 / Math.PI * newerAngle)) + ")");
    })

    path
      .classed("selected", function (x) { return d.name == x.name; });
}

这可能有点老套，但效果很好。在此处查看最终结果：https://jsfiddle.net/d28nw97x/1/

d3 旭日图选择旋转不起作用

d3 sunburst chart selection rotation not working

javascript

d3.js

svg

data-visualization

sunburst-diagram