Rendre le graphique D3 à partir d'une chaîne de caractères JSON au lieu d'un fichier JSON

Je suis en train d'essayer de rendre le Dendrogramme suivant à partir de mon application Rails:
http://bl.ocks.org/mbostock/4063570

J'ai un modèle avec de nombreux attributs, mais je voudrais manuellement imbriquer ces attributs et simplement l'utilisation de la chaîne d'interpolation de construire ma propre chaîne JSON, passer ensuite que d3 directement.

Voici mon code:

    <%= 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 %>

Voici mon (unminified) chaîne 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"
}
}
}
}
}';

Choses que j'ai essayé:

minifying le JSON de sorte qu'il est entré comme une seule ligne (pas d'effet)
l'exécution de JSON.parse(mystring) sur la chaîne
à la recherche par le biais de la D3 à la documentation et et googler pour un moyen de modifier la fonction suivante à accepter une chaîne au lieu d'un fichier chemin d'accès:
```
d3.json("/assets/flare.json", function(root) {
var nodes = cluster.nodes(root),
links = cluster.links(nodes);
```

source d'informationauteur Quincy Larson

d3.js json

26

D'abord, regardons ce qu'd3.json.
```
d3.json("/assets/flare.json", function(root) {
//code that uses the object 'root'
});
```
Cette charge le fichier /assets/flare.json à partir du serveur, interprète le contenu JSON et passe à l'objet que l' root argument à la fonction anonyme.

Où vous avez déjà un objet JSON, vous n'avez pas besoin d'utiliser le d3.json de la fonction - vous pouvez simplement utiliser l'objet directement.
```
var root = {
"name": "flare",
"children": [
...
]
};
//code that uses the object 'root'
```
Si l'objet est représenté par une chaîne, vous pouvez utiliser JSON.parse pour obtenir l'objet:
```
var myString = '{"name": "flare","children": [ ... ] }';
var root = JSON.parse(mystring);
//code that uses the object 'root'
```
Seconde, permet de regarder ce d3.layout.cluster attend de vos données. Comme par les docs:

... par défaut les enfants de l'accesseur suppose que chaque entrée de données est un objet avec des enfants, un tableau ...

En d'autres termes, les données doivent être de la forme:
```
var mystring = '{
"name": "Product",
"children": [
{
"name": "id",
"type": "number",
"description": "Product identifier",
"required": true
},
...
{
"name": "stock",
"type": "object",
"children": [
{
"name: "warehouse",
"type": "number"
},
{
"name": "retail",
"type": "number"
}
]
}
]
}
```
3

d3.json prend une URL comme argument, donc au lieu de donner le chemin d'accès au fichier, je vous propose de déléguer la gestion de données à l'automate (en particulier, si à l'avenir vous auriez besoin de le charger à partir DB), afin de simplifier les choses:
1. Créer une méthode dans votre contrôleur, qui seraient en fait d'ouvrir le fichier et retourne son contenu:
```
class YourFlareController < ApplicationController
def load
@data = File.read("app/assets/json/flare.json")
render :json => @data
end
end
```
1. Assurez-vous que vous avez un itinéraire dans vos itinéraires.rb
obtenir "yourflare/charge"
1. Et maintenant dans votre code javascript que vous pouvez simplement appeler
d3.json("http://host/yourflare/load", function(root) {

Vous devez vous connecter pour publier un commentaire.