我试图从我的Rails应用程序渲染以下树形图:http: //bl.ocks.org/mbostock/4063570
我有一个具有许多属性的模型,但我想手动嵌套这些属性,只需使用字符串插值来构建我自己的JSON字符串,然后直接将其传递给d3.
这是我的代码:
<%= javascript_tag do %>
var width = 960,
height = 2200;
var cluster = d3.layout.cluster()
.size([height, width - 160]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(40,0)");
**d3.json("/assets/flare.json", function(root) {**
var nodes = cluster.nodes(root),
links = cluster.links(nodes);
var link = svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal);
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + …Run Code Online (Sandbox Code Playgroud) 我希望从文件中加载JSON数据数组,以根据此处的Mike Bostock示例生成可折叠树形图.该示例使用格式正确的外部JSON文件,并使用d3.json函数加载它.
我希望能够从文件中加载一个json数组,这是从flay数组生成多级数组的结果(根据这里的示例问题).
一个我已经站了起来bl.ocks.org样本文件/ GitHub上显示的是什么,我想实现,而不采取多层次的JSON数据,并将其加入到可折叠的树形图中的重要组成部分两个部分
简而言之.我在文件中声明了以下数据;
var data = [
{ "name" : "ABC", "parent":"DEF", "relation": "ghi", "depth": 1 },
{ "name" : "DEF", "parent":"null", "relation": "null", "depth": 0 },
{ "name" : "new_name", "parent":"ABC", "relation": "rel", "depth": 2 },
{ "name" : "new_name2", "parent":"ABC", "relation": "foo", "depth": 2 },
{ "name" : "Foo", "parent":"DEF", "relation": "rel", "depth": 2 }
];
Run Code Online (Sandbox Code Playgroud)
然后通过这部分代码运行...
var dataMap = data.reduce(function(map, node) {
map[node.name] = …Run Code Online (Sandbox Code Playgroud)