Graphique à bulles en d3.js

Question

http://plnkr.co/edit/7aw93EnMyCR3HjTu1uHa?p=preview

J'ai ajouté le violon de travail. J'ai besoin de tracer un graphique à bulles sur la base de la valeur "profit" dans les propriétés du fichier "taluks.geojson". Cela fonctionne pour flare.json mais pas pour le fichier taluks.geojson.

I ont essayé de modifier le code en as- index.html

d3.json("taluks.geojson", function(error, root) { if (error) throw error; 

noeud var = svg.selectAll ("node") .data (bubble.nodes (classes (racine)) de .filter (function (d) {return! d.properties;}))

// Renvoie une hiérarchie aplatie contenant tous les nœuds feuille sous la racine.

classes de fonction (racine) { var classes = [];

fonction recurse (nom, noeud) {if (node.properties) node.properties.forEach (fonction (enfant) {recurse (nom_noeud, enfant);}); else classes.push ({packageName: nom, className: node.NAME_2, value: node.profit}); }

recurse (nulle, racine); return {properties: classes}; }

Mais le code ne fonctionne pas pour taluks.geojson mais ne fonctionne que pour flare.json. S'il vous plaît aider à la façon de tracer un graphique à bulles sur la base du bénéfice dans les propriétés du fichier taluks.geojson. S'il vous plaît veuillez suggérer d'autres modificatons.

Merci.

Answer 1

Pour effectuer le rendu graphique à bulles ou des données de diagramme d'arbres devrait être parent format relationnel et de l'enfant, si vous voyez des données flare.json

{ 
"name": "flare",//root parent or level 0 
"children": [ 
    { 
    "name": "analytics",//child node or level 1 
    "children": [ 
    { 
    "name": "cluster", //child node to analytics or level 2 
    "children": [ 
     {"name": "AgglomerativeCluster", "size": 3938}, 
     {"name": "CommunityStructure", "size": 3812}, 
     {"name": "HierarchicalCluster", "size": 6714}, 
     {"name": "MergeEdge", "size": 743} 
    ] 
    }] 
    }] 
} 
/* 
* In the above the data is hierarchical here flare will be like parent and children are in children array, name will be name of the node and at the end node or leaf node we don't have any children so here we reached to leaf 

and taluks.geojson is not having the structure of desired manner. So we have to make it into our desired structure. 
    * 
    */ 
    var data= d3.nest().key(function(d){ return d.properties.NAME_2;}).key(function(d){ return d.properties.NAME_3;}).entries(root.features); 
    /* 
    * d3.nest function will perform the grouping operation mentioned/returned by the key function, this function is used to group elements by using key and it takes the data from entries function. 
    * so as per above code we are grouping by NAME_2 which is district name and again we are grouping that data based on NAME_3 
    * from above we'll get data in below format 
    * [{"key":"East Godavari","values":[ 
    *  {"key":"Kottapeta","values":[ 
    *  {"type":"Feature","properties":{"NAME_2":"East Godavari","NAME_3":"Kottapeta","profit":326,"npa":174}, 
    *  "geometry":{"type":"MultiPolygon","coordinates":[ 
    *  [[[81.75195312500006,16.772489547729492],[81.76336669921892,16.7611598968507],[81.7764129638673,16.755041122436637],[81.76336669921875,16.7611598968507],[81.75195312500006,16.772489547729492]]] 
    *  ]}}] 
    *  }, 
    *  {"key":"Rajahmundry","values":[{"type":"Feature","properties":{"NAME_2":"East Godavari","NAME_3":"Rajahmundry","profit":1762,"npa":1683},"geometry":{"type":"MultiPolygon","coordinates":[ 
    *  [[[81.71717071533203,17.0606307983399],[81.72284698486357,17.047969818115348],[81.72709655761736,17.035369873046875],[81.72931671142607,17.02490997314453],[81.73168945312517,17.009309768676758],[81.73249053955084,16.990680694580135],[81.731689453125,17.009309768676758],[81.7293167114259,17.02490997314453],[81.72709655761719,17.035369873046875],[81.7228469848634,17.047969818115348],[81.71717071533203,17.0606307983399]]], 
    *  ]}}] 
    *  }, 
    *  {"key":"Rampa Chodavaram","values":[{"type":"Feature","properties":{"NAME_2":"East Godavari","NAME_3":"Rampa Chodavaram","profit":376,"npa":362},"geometry":{"type":"MultiPolygon","coordinates":[[[[81.64000701904303,17.217769622802678],[81.63854217529308,17.24398994445812],[81.64405822753918,17.25922966003418],[81.64591217041021,17.293151855468864],[81.64405822753935,17.25922966003418],[81.63854217529325,17.24398994445812],[81.64000701904303,17.217769622802678]]], 
    *  [[[81.51127624511724,17.463871002197266],[81.51648712158232,17.458469390869084],[81.52410888671903,17.454042434692326],[81.53122711181658,17.4517498016358],[81.55007171630854,17.447589874267692],[81.5312271118164,17.4517498016358],[81.52410888671886,17.454042434692326],[81.51648712158214,17.458469390869084],[81.51127624511724,17.463871002197266]]]]}}] 
    *  }, 
    *  {"key":"Razole","values":[ 
    *  {"type":"Feature","properties":{"NAME_2":"East Godavari","NAME_3":"Razole","profit":1185,"npa":1141},"geometry":{"type":"MultiPolygon","coordinates":[ 
    *  [[[81.6993026733399,16.41020011901867],[81.70881652832048,16.383939743041992],[81.7134628295899,16.35638809204113],[81.70881652832031,16.383939743041992],[81.6993026733399,16.41020011901867]]], 
    *  ]}}] 
    *  } 
    * ......... 
    * ]}] 
To know more about d3 nest function go this link https://github.com/mbostock/d3/wiki/Arrays 
    * above structure is generated by d3.nest function, now we need to arrange that data into parent child hierarchical data, for this we are using below code 
    */ 
    var myData={name:'flare', children:[]};//this will be root 
    data.forEach(function(distc){ 
      var dis={}; 
      dis.name=distc.key;//here distc will hold one level write console.log(distc); and observe the data 
      dis.children = []; 
      myData.children.push(dis); 
      distc.values.forEach(function(chil){ 
       var chis={}; 
       chis.name=chil.key; 
       // chis.children=chil.values; 
       chis.size=chil.values[0].properties.profit;//we are using size as value in recurse function of classes function and we want to display bubble chart on profit value 
       dis.children.push(chis); 



    }); 

}); 
console.log(myData);//myData has the desired structure 
root=myData;//assigning that json to root variable 

Je pense que vous savez ce qui se passe avec le reste du code. Espérons que tout est clair, sinon demandez-moi plus. : D

Pour créer graphique à bulles, nous utilisons la mise en page de pack d3, cette mise en page nous sont produits à var bubble = d3.layout.pack() .sort(null) .size([diameter, diameter]) .padding(1.5); et ce bubble appelant noeuds à cette ligne

var node = svg.selectAll(".node") .data(bubble.nodes(classes(root))//here bubble.nodes takes the json, that json should be in leaf structure, nodes function will generate relational data, write console.log(bubble.nodes(classes(root))); Here we are using classes function, because flare.json has already relational format json but bubbles.nodes need leaf structure so in classes function we are converting that flare.json relational structure into leaf .filter(function(d) { return !d.children; })) .enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });