Я пытаюсь сделать следующий Dendrogram из моего приложения 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(" + d.y + "," + d.x + ")"; })
node.append("circle")
.attr("r", 4.5);
node.append("text")
.attr("dx", function(d) { return d.children ? -8 : 8; })
.attr("dy", 3)
.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.name; });
});
d3.select(self.frameElement).style("height", height + "px");
<% end %>
Вот моя (неустановленная) строка JSON:
var mystring = '{
"name": "Product",
"properties": {
"id": {
"type": "number",
"description": "Product identifier",
"required": true
},
"name": {
"type": "string",
"description": "Name of the product",
"required": true
},
"price": {
"type": "number",
"minimum": 0,
"required": true
},
"tags": {
"type": "array",
"items": {
"type": "string"
}
},
"stock": {
"type": "object",
"properties": {
"warehouse": {
"type": "number"
},
"retail": {
"type": "number"
}
}
}
}
}';
Вещи, которые я пробовал:
1), минимизируя JSON, поэтому он вводится как одна строка (без эффекта)
2) запуск JSON.parse(mystring) в строке
3), просматривая документацию D3 и и googling, чтобы изменить следующую функцию, чтобы принять строку вместо пути к файлу: d3.json( "/assets/flare.json", function (root) { var nodes = cluster.nodes(root), links = cluster.links(узлы);