Question

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

我添加了工作小提琴。我需要在＆＃34;利润＆＃34;的基础上绘制泡泡图。＆＃34; taluks.geojson＆＃34;的属性值文件。这适用于flare.json，但不适用于taluks.geojson文件。

我尝试将index.html中的代码修改为 -

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

var node = svg.selectAll（＆＃34; .node＆＃34;）。data（bubble.nodes（classes（root））.filter（function（d）{return！d.properties;}））< / p>

//返回包含根目录下所有叶节点的展平层次结构。

函数类（root）{ var classes = [];

function recurse（name，node）{if（node.properties）node.properties.forEach（function（child）{recurse（node.name，child）;}）; else classes.push（{packageName：name，className：node.NAME_2，value：node.profit}）; }

recurse（null，root）; return {properties：classes}; }

但代码不适用于taluks.geojson，但仅适用于flare.json。请帮助关于如何根据taluks.geojson文件的属性中的利润绘制气泡图。请建议任何进一步的修改。

谢谢。

Answer 1

要渲染气泡图或树形图数据应该是关系格式父和子，如果你看到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

我想你知道其余的代码会发生什么。希望一切都清楚，如果不是问我更多。：d

为了创建气泡图我们正在使用d3 pack布局，我们生成的这个布局此行var bubble = d3.layout.pack() .sort(null) .size([diameter, diameter]) .padding(1.5);和此bubble个调用节点

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 + ")"; });

d3.js中的气泡图

1 个答案: