如何更改 d3js 图表的布局？答案

【问题标题】：How to change the layout of the d3js chart?如何更改 d3js 图表的布局？
【发布时间】：2012-10-25 12:01:38
【问题描述】：

我最近开始使用 d3js，目前正在尝试弄清楚如何使用过渡。

TreeMap example 使用我自己的 json 文件。

我的问题是：如何通过从 treemap 到 tree 的过渡来更改布局？

我的 json 数据如下所示：

{"name": "OS",
 "children": [
   {"name": "Linux x64",
    "children": [
      {"name": "Linux (amd64)", "size": 58154},
      {"name": "Linux (ia64)", "size": 3}
    ]
   },
   {"name": "Linux x86",
    "children": [
      {"name": "Linux (i386)", "size": 12269}
    ]
   },
   {"name": "Mac OS x64",
    "children": [
      {"name": "Mac OS X (x86_64)", "size": 53118}
    ]
   },
   {"name": "Mac OS x86",
    "children": [
      {"name": "Mac OS X (i386)", "size": 409}
    ]
   },
   {"name": "SunOS x64",
    "children": [
      {"name": "SunOS (amd64)", "size": 3}
    ]
   },
   {"name": "SunOS x86",
    "children": [
      {"name": "SunOS (x86)", "size": 8}
    ]
   },
   {"name": "Windows x64",
    "children": [
      {"name": "Windows 2003 (amd64)", "size": 32},
      {"name": "Windows 7 (amd64)", "size": 25492},
      {"name": "Windows 8 (amd64)", "size": 19},
      {"name": "Windows NT (unknown) (amd64)", "size": 76},
      {"name": "Windows Server 2008 (amd64)", "size": 349},
      {"name": "Windows Server 2008 R2 (amd64)", "size": 428},
      {"name": "Windows Vista (amd64)", "size": 1337},
      {"name": "Windows XP (amd64)", "size": 1284}
    ]
   },
   {"name": "Windows x86",
    "children": [
      {"name": "Windows 2000 (x86)", "size": 147},
      {"name": "Windows 2003 (x86)", "size": 390},
      {"name": "Windows 7 (x86)", "size": 17933},
      {"name": "Windows 8 (x86)", "size": 10},
      {"name": "Windows 95 (x86)", "size": 2},
      {"name": "Windows NT (unknown) (x86)", "size": 13},
      {"name": "Windows Server 2008 (x86)", "size": 19},
      {"name": "Windows Server 2008 R2 (x86)", "size": 43},
      {"name": "Windows Vista (x86)", "size": 4815},
      {"name": "Windows XP (x86)", "size": 34545}
    ]
   }
 ]
}

我并没有真正更改示例代码，但如果有帮助，我可以发布它。

【问题讨论】：

标签： javascript json layout d3.js

【解决方案1】：

您无法从 TreeMap 过渡到 Tree...过渡更改样式或属性，但您无法从一种布局过渡到另一种布局。

对于傻瓜来说：过渡就像将苹果的颜色从红色变为绿色或改变它的大小，但你不能用橙色来改变苹果。

【讨论】：

好吧，也许我误用了“过渡”这个词。我的问题旨在以某种方式将树形图“变形”成树，即动态更改布局。这可能吗？
@Baz 你可以在旧布局上创建一个新布局，如果你想给它一些效果，可以让 jquery 淡入淡出或其他东西，但你不能“变形，过渡或任何东西”一种布局到另一种布局。
那么this 示例是如何工作的？我尝试理解代码，但我对 javascript 和 d3.js 还很陌生。
这些是应用于单个布局的过渡和手动编码的布局之间的过渡（自定义过渡）之间的混合，将每个 SVG 布局转换为类似于下一个布局的内容并应用淡入淡出效果，并且仅适用对于那些布局（从布局 a 到布局 b），布局之间没有标准的过渡。
嗯，我想这就是答案。