树、簇、径向树和径向簇布局之间的平滑过渡 [英] Smooth transitioning between tree, cluster, radial tree, and radial cluster layouts

问题描述

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

我认为使用 D3 会比较容易.我开始了，但我在平移和旋转、数据绑定等方面迷失了方向，所以我向您寻求帮助.另外，可能我在做一些不符合 D3 精神的事情，这很糟糕，因为我正在寻求一个干净的解决方案.

我整理了一个.

更新 2:

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

{doom-duba-doom}

这是一个更新的jsfiddle.

解决方案

我没有足够的声誉来发表评论......所以，我只是将这个微小的贡献作为伪答案提供.看完这篇帖子，并且基于@VividD 对转换的简单程度的完美评论，我只是在此 小提琴.

加法很简单:

var diagonalVertical = d3.svg.diagonal().投影(功能(d){返回 [d.x, d.y];});

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

For a project, I need to interactively change hierarchical data layout of a visualization - without any change of the underlying data whatsoever. The layouts capable of switching between themselves should be tree, cluster, radial tree, and radial cluster. And transitioning should be preferably an animation.

I thought that would be relatively easy task with D3. I started, but I got lost in translations and rotations, data bindings, and similar, so I am asking you for help. Also, probably I am doing something not in the spirit of D3, which is bad since I am seeking a clean solution.

I put together a jsfidle, but it is just a starting point, with added radio buttons, convenient small data set, and initial cluster layout - just to help anybody who wants to take a look at this. Thanks in advance!

UPDATE:

I wanted to focus on links only, so I temporary disabled other elements. Building on @AmeliaBR method, following animations are obtained:

Here is updated jsfiddle.

UPDATE 2:

Now with circles: (excuse my choice of colors)

{doom-duba-doom}

Here is one more updated jsfiddle.

解决方案

I don't have enough reputation to make a comment...so, I am just giving this tiny contribution as a pseudo-answer. After looking at this post, and based on @VividD's perfect comment on how simple the transitions turned out to be, I simply added the Tree Vertical option to the transformations in this fiddle.

The addition is simply this:

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

Anyways, I have bookmarked this highly instructional interaction.

这篇关于树、簇、径向树和径向簇布局之间的平滑过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！