feat: make basic works

phodal · Apr 28, 2020 · bd7a2d3 · bd7a2d3
1 parent d6f35cc
commit bd7a2d3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 14 deletions.
diff --git a/projects/ledge-render/src/lib/chart/ledge-fish-bone/fishbone.ts b/projects/ledge-render/src/lib/chart/ledge-fish-bone/fishbone.ts
@@ -66,10 +66,7 @@ const fishbone = () => {
   //   .on('tick', _tick);
 
   const forceLayout = d3.forceSimulation()
-    // .force("charge", d3.forceManyBody().strength(10))
-    .force("x", d3.forceX(width / 2).strength(1))
-    .force("y", d3.forceY(height / 2).strength(1))
-    .force("center", d3.forceCenter(width / 2, height / 2))
+    .force('center', d3.forceCenter(width / 2, height / 2))
     .force('link', d3.forceLink().distance(_linkDistance))
     .on('tick', ticked);
 
@@ -109,9 +106,8 @@ const fishbone = () => {
 
     // create the links
     link = $.selectAll('.link')
-      .data(dataLinks);
-
-    link.enter()
+      .data(dataLinks)
+      .enter()
       .append('line')
       .attr('class', (d) => {
         return 'link link-' + d.depth;
@@ -123,11 +119,9 @@ const fishbone = () => {
     link.exit().remove();
 
     // establish the node selection
-    node = $.selectAll('.node').data(dataNodes);
-
-
-    // actually create nodes
-    node.enter().append('g')
+    node = $.selectAll('.node')
+      .data(dataNodes)
+      .enter().append('g')
       .attr('class',
         (d) => {
           return 'node' + (d.root ? ' root' : '');
@@ -328,7 +322,7 @@ const fishbone = () => {
     dataNodes.forEach(d => {
       // handle the middle... could probably store the root width...
       if (d.root) {
-        // d.x = width - (marginSize + d.root.getBBox().width);
+        d.x = width - (marginSize + root.getBBox().width);
       }
       if (d.tail) {
         d.x = marginSize;

diff --git a/projects/ledge-render/src/lib/chart/ledge-fish-bone/ledge-fish-bone.component.ts b/projects/ledge-render/src/lib/chart/ledge-fish-bone/ledge-fish-bone.component.ts
@@ -42,7 +42,8 @@ export class LedgeFishBoneComponent implements OnInit, AfterViewInit {
     const fb = fishbone();
     d3.select(this.chart.nativeElement)
       .append('svg')
-      .attr('width', 1200).attr('height', 800)
+      .attr('width', 1200)
+      .attr('height', 800)
       .datum(data)
       .call(fb.defaultArrow)
       .call(fb);