conty trees

src/d3-components/bubbles-nested-routes/bubbles.vue

@@ -7,7 +7,7 @@ Links:
 -->
 
 <template>
-  <svg width="500" height="400"></svg>
+  <svg width="500" height="500"></svg>
 </template>
 
 <script>

src/d3-components/bubbles-nested-routes/ph2/index.js

@@ -33,7 +33,6 @@ export default class PH2 {
 
     if(this.layout) {
       this.layout.exit();
-
     }
     this.layout = this.layouts[layoutName];
     if(!this.layout.inited) {
@@ -53,9 +52,10 @@ export default class PH2 {
 
   _init() {
     this.simulation = d3.forceSimulation()
-      .force("collide", d3.forceCollide(d => d.r + 5).iterations(16))
+      .force("index-collide", d3.forceCollide(d => d.r + 5).iterations(16))
-      .force("center", d3.forceCenter(0, 0))
+      .force("index-x", d3.forceX().strength(0.05))
-      .force("charge", d3.forceManyBody().strength(-1))
+      .force("index-y", d3.forceY().strength(0.05))
+
 
     this._initLayouts();
 

src/d3-components/bubbles-nested-routes/ph2/layout-contry.js

@@ -1,4 +1,5 @@
 const d3 = require('d3');
+const _ = require('lodash');
 
 export default class {
   constructor(elem, data, simulation) {
@@ -8,27 +9,61 @@ export default class {
   }
 
   init() {
-    var range = this.data.length / 20;
+    var groups = _(this.data)
-    this.links = d3.range(0, range).map(
+      .map((k, i) => ({
-      () => ({
+        location: k.Location.split(', ')[1],
-        source:~~d3.randomUniform(range)(),
+        index: i
-        target:~~d3.randomUniform(range)()
+      }))
-      })
+      .groupBy('location')
-    );
+      .value();
+
+    this.countries = _.map(groups, (v, k) => ({ key: k, r: -30 }));
+
+    this.links = [];
+    console.log(groups[this.countries[0].key][0]);
+    for(var i = 0; i < this.countries.length; i++) {
+      for(var j = 0; j < groups[this.countries[i].key].length; j++) {
+        this.links.push({
+          source: i + this.data.length,
+          target: groups[this.countries[i].key][j].index
+        });
+      }
+    }
+
   }
 
   enter() {
+
+    this.nodesBefore = this.simulation.nodes();
     this.simulation
       .force("link", d3.forceLink().id(d => d.index))
+      .force("charge", d3.forceManyBody().strength(-30))
+      .force("x", d3.forceX().strength(0.11))
+      .force("y", d3.forceY().strength(0.11))
+
+    //console.log(this.simulation.force("link").distance());
+    this.simulation.force("link")//.distance(-10)
+
+    this.simulation.nodes(_.concat(this.nodesBefore, this.countries));
+
+    this.countryG = this.elem.append("g");
+    this.countyLabels = this.countryG
+      .selectAll('text')
+      .data(this.countries)
+      .enter()
+      .append('text')
+      .text(d => d.key)
+      .attr("text-anchor", "middle")
+      .attr("font-size", "10")
 
     this.linesG = this.elem.insert("g", ":first-child");
     this.lines = this.linesG
-      .attr("class", "links")
       .selectAll("line")
       .data(this.links)
       .enter()
       .append("line")
-      .attr("stroke", "black")
+      .attr("stroke", "#d5d5d5")
+
 
     this.simulation
       .force("link")
@@ -42,11 +77,17 @@ export default class {
       .attr("y1", d => d.source.y)
       .attr("x2", d => d.target.x)
       .attr("y2", d => d.target.y);
+    this.countyLabels
+      .attr('x', d => d.x)
+      .attr('y', d => d.y)
   }
 
   exit() {
+    this.simulation.nodes(this.nodesBefore);
     this.simulation
       .force("link", null)
+      .force("charge", null)
     this.linesG.remove();
+    this.countryG.remove();
   }
 }