rendering labels with nodes

Author: Brianna Sookhoo

app/charts/route-trace.jsx

@@ -1,14 +1,4 @@
 import * as d3 from 'd3';
-
-let text = [{
-  t: 'reverseproxy',
-}, {
-  t: 'books',
-}, {
-  t: 'orders',
-}, {
-  t: 'customers'
-}]
 class RouteTrace {
   containerEl;
   props;
@@ -27,7 +17,6 @@ class RouteTrace {
     this.updateDatapoints();
   }
 
-
   updateDatapoints = () => {
     const { svg, props: { data, width, height } } = this;
     console.log('data: ', data)
@@ -36,61 +25,59 @@ class RouteTrace {
 
     console.log('1st data point: ', data[0][0])
     console.log('4th data point: ', data[0][3])
-
 
     var simulation = d3.forceSimulation(data[0])
-      .force('link', d3.forceLink())
-      .force('charge', d3.forceManyBody())
+      .force('link', d3.forceLink())
+      .force('charge', d3.forceManyBody())
       .force('center', d3.forceCenter(width / 2, height / 2))
-    
-    const node = svg
-      .selectAll('circle')
+
+    const link = svg.append("g")
+      .attr("class", "links")
+      .selectAll("line")
+      .data(data[1])
+      .enter()
+      .append("line")
+      .style('stroke', 'black')
+
+    const node = svg.append("g")
+      .attr("class", "nodes")
+      .selectAll("g")
       .data(data[0])
       .enter()
-      .append('circle')
+      .append("g")
+
+    const circles = node.append("circle")
+      .attr("r", 20)
+      .attr("fill", '#00eda0')
       .on('mouseover', () => d3.select(this).text(d.id))
-    
-    const circleAttr = node
-      .attr('r', 20)
-      .attr('cx', 200)
-      .attr('cy', 200)
-      .style('fill', '#00eda0')
       .on('mouseup', (d, i, nodes) => this.setActiveDatapoint(d, nodes[i]))
 
-    const text = svg.selectAll('text')
-      .data(data[0]).enter().append('text')
-        
-    const textLabels = text
+    const lables = node.append("text")
+      .text(d => d.id)
       .attr('x', d => d.x)
       .attr('y', d => d.y)
-      .attr('dx', 100)
-      .attr('dy','10em')
-      .text(d => d.id);
 
-    const link = svg
-      .selectAll('line')
-      .data(data[1])
-      .enter()
-      .append('line')
-      .style('stroke', 'black')
+    node.append("title")
+      .text(d => d.id)
 
     simulation
       .nodes(data[0])
       .on('tick', ticked);
 
     simulation.force('link')
-      .links(link);
+      // .links(data[1]); // error: cannot create property vx on books
 
     function ticked() {
       link
         .attr('x1', function(d) { return d.source.x; })
         .attr('y1', function(d) { return d.source.y; })
         .attr('x2', function(d) { return d.target.x; })
         .attr('y2', function(d) { return d.target.y; });
-  
+
       node
-        .attr('cx', function(d) { return d.x; })
-        .attr('cy', function(d) { return d.y; });
+        .attr("transform", function(d) {
+          return "translate(" + d.x + "," + d.y + ")";
+        })
     }
   }