如何更改d3js图表的布局?

时间:2012-11-05 15:56:01

标签: javascript json layout d3.js

我最近开始使用d3js,我目前正试图弄清楚如何使用转换。

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

我的问题是:如何通过从treemaptree的转换来更改布局?

我的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}
    ]
   }
 ]
}

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

1 个答案:

答案 0 :(得分:1)

您无法从TreeMap转换为Tree ...转换更改样式或属性但您无法从一个布局转换到另一个布局。

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