d3.js - 树、簇、径向树和径向簇布局之间的平滑过渡

Question

对于一个项目，我需要以交互方式更改可视化的分层数据布局 - 无需对基础数据进行任何更改。能够相互切换的布局应该是树、簇、径向树和径向簇。过渡最好是动画。

我认为使用 D3 将是相对容易的任务.我开始了，但我在平移和旋转、数据绑定(bind)和类似方面迷路了，所以我向你寻求帮助。另外，可能我正在做一些不符合 D3 精神的事情，这很糟糕，因为我正在寻求一个干净的解决方案。

我整理了一个jsfidle ，但这只是一个起点，添加了单选按钮、方便的小数据集和初始集群布局——只是为了帮助任何想看看这个的人。提前致谢!

更新:

我只想专注于链接，所以我暂时禁用了其他元素。基于@AmeliaBR 方法，获得以下动画:



这里是 updated jsfiddle .

更新 2:

现在用圆圈:(请原谅我选择的颜色)

{厄运杜巴厄运}



这里是 one more updated jsfiddle .

Answer 1

我没有足够的声誉发表评论......所以，我只是把这个微小的贡献作为一个伪答案。看完这个post ，并且基于@VividD 对转换变得多么简单的完美评论，我只是在 fiddle 中的转换中添加了 Tree Vertical 选项。 .

添加的内容很简单:

var diagonalVertical = d3.svg.diagonal()
    .projection(function (d) { 
        return [d.x, d.y]; 
    });

无论如何，我已经为这种高度指导性的互动添加了书签。