changing node color and text color

Author: krisfragata

src/components/Sidebar.svelte

@@ -18,15 +18,18 @@
   </script>
 
   <main>
-    <h1>See your component structure below!</h1>
-    {#if componentStructure.length > 0}
-      <Tree {componentStructure}/>
-    {/if}
+    <!-- <div class="background"> -->
+      <h1>See your component structure below!</h1>
+      {#if componentStructure.length > 0}
+        <Tree {componentStructure}/>
+      {/if}
+    <!-- </div> -->
   </main>
 
   <style>
+
     h1 {
-      color: red;
+      color: #e3ae52;
       text-align: center;
     }
   </style>

src/components/Tree.svelte

@@ -1,79 +1,91 @@
 <script>
-  import { onMount } from 'svelte';
-  import * as d3 from 'd3';
+  import { onMount } from "svelte";
+  import * as d3 from "d3";
 
   export let componentStructure;
+  // let containerHeight = 0;
+  // let containerWidth = 0;
+  // document.addEventListener("DOMContentLoaded", () => {
+  //   containerWidth = document.getElementById("tree-container").offsetWidth;
+  //   containerHeight = document.getElementById("tree-container").offsetHeight;
+  //   console.log("container: ", containerWidth);
+  // });
 
   onMount(() => {
     let height = 2000;
     let width = 2000;
 
+    let containerWidth = document.getElementById("tree-container").offsetWidth;
+    let containerHeight =
+      document.getElementById("tree-container").offsetHeight;
+
     let window = d3
-      .select('#tree-container')
-      .append('svg')
-      .attr('height', height)
-      .attr('width', width)
-      .append('g')
-      .attr('transform', 'translate(50,50)');
+      .select("#tree-container")
+      .append("svg")
+      .attr("height", containerHeight)
+      .attr("width", containerWidth)
+      .append("g")
+      .attr("transform", "translate(50,50)");
 
     const root = d3.hierarchy(componentStructure[0]);
-    //const roots = d3.hierarchy(root);
-    // console.log(componentStructure[0]);
-    // console.log(root);
 
     // console.log('root test', root.data);
-    const tree = d3.tree().size([height / 4, width / 4]);
-
-    //console.log('hello');
-    // console.log(componentStructure);
-    // console.log(componentStructure[0]);
+    const tree = d3.tree().size([containerHeight / 4, containerWidth / 4]);
 
     const treeDataTransformed = tree(root);
 
     let nodes = treeDataTransformed.descendants();
-    console.log('nodes', nodes);
-    //console.log(nodes);
     let links = treeDataTransformed.links();
-    //console.log(links);
 
     let node = window
-      .selectAll('.node')
+      .selectAll(".node")
       .data(nodes)
       .enter()
-      .append('g')
-      .attr('class', 'node')
-      .attr('transform', function (d) {
+      .append("g")
+      .attr("class", "node")
+      .attr("transform", function (d) {
         //console.log('d', d);
         // console.log(typeof d);
-        return 'translate(' + d.x + ',' + d.y + ')';
+        return "translate(" + d.x + "," + d.y + ")";
       });
 
-    node.append('circle').attr('r', 15).attr('fill', '#ff0000');
+    node.append("circle").attr("r", 15).attr("fill", "#e3ae52");
 
     // console.log(root);
 
-    node.append('text').text(function (d) {
-      //console.log(d.data.name);
-      return d.data.name;
-    });
+    node
+      .append("text")
+      .text(function (d) {
+        //console.log(d.data.name);
+        return d.data.name;
+      })
+      .style("fill", "antiquewhite")
+      .attr("dy", "2em") // Move text down
+      .attr("text-anchor", "middle");
 
     let diagonal = d3
       .linkVertical()
       .x((d) => d.x)
       .y((d) => d.y);
 
     window
-      .selectAll('.link')
+      .selectAll(".link")
       .data(links)
       .enter()
-      .append('path')
-      .attr('class', 'link')
-      .attr('fill', 'none')
-      .attr('stroke', '#fff')
-      .attr('stroke-width', 1)
-      .attr('d', diagonal);
+      .append("path")
+      .attr("class", "link")
+      .attr("fill", "none")
+      .attr("stroke", "#fff")
+      .attr("stroke-width", 1)
+      .attr("d", diagonal);
   });
 </script>
 
 <div id="tree-container"></div>
 
+<style>
+  #tree-container {
+    width: 100%;
+    height: 100%;
+  }
+</style>