树,集群,径向树和径向集群布局之间的平滑过渡

Question

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

我认为这将是相对容易的任务D3.我开始了,但是我在翻译和轮换,数据绑定等方面迷失了,所以我向你寻求帮助.此外,我可能正在做的不是D3的精神,这是不好的,因为我正在寻求一个干净的解决方案.

我把一个jsfidle放在一起,但它只是一个起点,增加了单选按钮,方便的小数据集和初始集群布局 - 只是为了帮助任何想看看它的人.提前致谢!

更新:

我只想专注于链接,所以我暂时禁用其他元素.在@AmeliaBR方法的基础上,获得以下动画:

这是更新的jsfiddle.

更新2:

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

{末日毒霸-末日}

这是一个更新的jsfiddle.

Answer 1

只要所有布局都具有相同的链接路径,圆形节点和文本标签的整体结构,我就不明白为什么会那么难.

只需确保所有对象(包括链接路径)都具有良好的数据键,该数据键独立于布局函数创建的数据属性.然后,对于每个转换,使用相应布局函数的结果更新数据并绘制该布局.

我已经实现了在这里实现的径向树的过渡:http: //jsfiddle.net/YV2XX/5/

关键代码:

//Radial Tree layout//
var diameter = 500;
var radialTree = d3.layout.tree()
    .size([360, diameter / 2 ])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
var radialDiagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
function transitionToRadialTree() {
  var nodes = radialTree.nodes(root), //recalculate layout
      links = radialTree.links(nodes);

    svg.transition().duration(1500)
       .attr("transform", "translate(" + (diameter/2)
                 + "," + (diameter/2) + ")");
             //set appropriate translation (origin in middle of svg)

    link.data(links, function(d){
              return d.source.name + d.target.name;})
      .transition().duration(1500)
      .attr("d", radialDiagonal); //get the new radial path

  node.data(nodes, function(d){
              return d.name ;})
      .transition().duration(1500)
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) 

  node.select("circle")
      .transition().duration(1500)
      .attr("r", 4.5);

  node.select("text")
      .transition().duration(1500)
      .attr("dy", ".31em")
      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; });
};

布局代码全部来自http://bl.ocks.org/mbostock/4063550,我刚刚将其更改为更新而不是初始化.

另请注意,我已将变量声明移到root数据读取方法之外,因此可以通过转换函数重新访问它.

布局仍然需要一些finessing,但你明白了.

现在,如果您希望其中一个转换是分区,树形图或其他不使用节点链接结构的布局,它们会变得更加复杂......

Answer 2

我没有足够的声誉来发表评论......所以,我只是把这个小小的贡献作为一个伪答案.看完这篇文章后,基于@VividD对转换过程简单的完美评论,我简单地将Tree Vertical选项添加到这个小提琴的转换中.

添加就是这样的:

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

无论如何,我已经将这种高度教学的互动加入了书签.