1

我一直在尝试使用size/count transition修改可缩放的旭日形首饰示例。这个小提琴显示了我目前的情况。

我遇到了一个问题，即两种转换的组合不会产生预期的结果。如果您首先单击某个节点进行放大，然后触发大小/计数转换，则应显示的节点无法正确显示。

我对此的解决方案是避免在图形已放大时触发大小/计数转换：我通过模拟单击根节点（缩小）然后更改大小/计数来重置旭日形。这种方法确实有效，但视觉效果不是很令人满意，正如您在我的示例中看到的那样。这是我正在测试的两种方式之一：图形重置和由单选按钮“更改”事件触发的大小/计数转换。

// Size/count radio-buttons with reset 1:
// dispatch both transitions on same event
d3.selectAll("input#size1, input#count1")
    .on("change", function() {
    // reset
    var root_node = d3.select("#root_node");
    var check = simulateClick(root_node[0][0]);
    // size/count
    if (check === true) {
        var change_value = this.value;
        path.data(partition.value(function(d) {
            if (change_value==="size") { return d.size; }
            else if (change_value==="count") { return 1; }
        }))
        .transition()
        .delay(400)
        .duration(600)
        .attrTween("d", arcTweenSwitch);
    }
});

撇开实现选择（在相同事件或不同事件上触发转换）和浏览器问题（尝试了不同结果的 Firefox 和 Chrome），问题在于两个转换似乎重叠。在第二个中使用 .delay() 没有帮助。

视觉效果是第二次过渡，不是单一的平滑过程，而是一下子进入最后阶段，然后回到初始阶段，从头开始流畅地播放过渡。

热烈欢迎任何指示或建议......谢谢！

4

0 回答 0