Move text closer to nodes

Author: Umius-Brian

app/charts/route-trace.jsx

@@ -42,41 +42,37 @@ class RouteTrace {
       .force('link', d3.forceLink())
       .force('charge', d3.forceManyBody())
       .force('center', d3.forceCenter(width / 2, height / 2))
-
+    
     const node = svg
-      .selectAll("circle")
+      .selectAll('circle')
       .data(data[0])
       .enter()
-      .append("circle")
-    
-    //  node.select('circle').data(stuff).append("circle").select('text')
-    //  .text(function(d) { return d.id });
+      .append('circle')
+      .on('mouseover', () => d3.select(this).text(d.id))
 
-    const circleAttributes = node
-      .attr("r", 20)
-      // .attr('cx', 200)
-      // .attr('cy', 200)
-      .style("fill", "#00eda0")
+    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 text = svg.selectAll('text')
+      .data(data[0]).enter().append('text')
 
-    const labels = text
-      .attr("x", d => d.x)
-      .attr("y", d => d.y)
-      .attr("dx", 12)
-      .attr("dy",".35em")
+    const textLabels = text
+      .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")
+      .selectAll('line')
       .data(data[1])
       .enter()
-      .append("line")
-      .style("stroke", "black")
+      .append('line')
+      .style('stroke', 'black')
 
     simulation
       .nodes(data[0])
@@ -87,14 +83,14 @@ class RouteTrace {
 
     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; });
+        .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('cx', function(d) { return d.x; })
+        .attr('cy', function(d) { return d.y; });
     }
   }