In D3 Hierarchy Typescript, every parent-child duo is assigned the same color

Question

In D3 Hierarchy Typescript, every parent-child duo is assigned the same color

I recently came across an interesting example of the "D3 Collapsible Force Layout" on this website. I decided to tweak the input data a bit:

 const data = {
 "name": "directory",
 "children": [
  {"name": "1st file", 
    "children": [{"name": "1f 1st function", "group": 1},  
    {"name": "1f 2nd function", "group": 1},
    {"name": "1f 3rd function", "group": 1},
    {"name": "1f 4th function", "group": 1}], "group": 1,},
  {"name": "2nd file", "children": [
    {"name": "2f 1st function", "group": 2},
    {"name": "2f 2nd function", "group": 2}], "group": 2},
  {"name": "3rd file", "children": [
    {"name": "3f 1st function", "group": 3}
  ], "group": 3},
  {"name": "4th file", "children": [
    {"name": "4f 1st function", "group": 4},
    {"name": "4f 2nd function", "group": 4},
    {"name": "4f 3rd function", "group": 4}
  ], "group": 4}
 ],
 "group": 0
}

I'm looking to assign specific colors to the parent-child nodes based on their group value. For example, nodes with "group:1" should be red, "group:2" should be green, and so on. Could someone help me achieve this? Appreciate your time and assistance.

javascript typescript d3.js parent-child force-layout

Answer 1

Answer №1

Using an ordinal scale simplifies the process. Consider the following example:

const colorScale = d3.scaleOrdinal()
  .domain(d3.range(5))
  .range(d3.schemeDark2);

In this case, a color array called d3.schemeDark2 is used. Feel free to customize it with your preferred colors. Since the groups are numerical, d3.range is utilized for the domain.

To fill the circles with colors:

.style('fill', function(d){
    return colorScale(d.data.group)
})

Below is the updated code with your data and adjustments:

const data = {
  "name": "directory",
  "children": [{
      "name": "1st file",
      "children": [{
          "name": "1f 1st function",
          "group": 1
        },
        {
          "name": "1f 2nd function",
          "group": 1
        },
        {
          "name": "1f 3rd function",
          "group": 1
        },
        {
          "name": "1f 4th function",
          "group": 1
        }
      ],
      "group": 1,
    },
    {
      "name": "2nd file",
      "children": [{
          "name": "2f 1st function",
          "group": 2
        },
        {
          "name": "2f 2nd function",
          "group": 2
        }
      ],
      "group": 2
    },
    {
      "name": "3rd file",
      "children": [{
        "name": "3f 1st function",
        "group": 3
      }],
      "group": 3
    },
    {
      "name": "4th file",
      "children": [{
          "name": "4f 1st function",
          "group": 4
        },
        {
          "name": "4f 2nd function",
          "group": 4
        },
        {
          "name": "4f 3rd function",
          "group": 4
        }
      ],
      "group": 4
    }
  ],
  "group": 0
};

const colorScale = d3.scaleOrdinal()
  .domain(d3.range(5))
  .range(d3.schemeDark2);

const width = 500,
  height = 400;

let i = 0;

const root = d3.hierarchy(data);
const transform = d3.zoomIdentity;
let node, link;

const svg = d3.select('body').append('svg')
  .call(d3.zoom().scaleExtent([1 / 2, 8]).on('zoom', zoomed))
  .append('g')
  .attr('transform', 'translate(40,0)');
...


update()

body {
  background-color: #E6E6E6;
}

svg {
  width: 100vw;
  height: 100vh;
}

.node {
  pointer-events: all;
  cursor: pointer;
  z-index: 1000;
}

.node text {
  font: 8px sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Answer 2

Using an ordinal scale simplifies the process. Consider the following example:

const colorScale = d3.scaleOrdinal()
  .domain(d3.range(5))
  .range(d3.schemeDark2);

In this case, a color array called d3.schemeDark2 is used. Feel free to customize it with your preferred colors. Since the groups are numerical, d3.range is utilized for the domain.

To fill the circles with colors:

.style('fill', function(d){
    return colorScale(d.data.group)
})

Below is the updated code with your data and adjustments:

const data = {
  "name": "directory",
  "children": [{
      "name": "1st file",
      "children": [{
          "name": "1f 1st function",
          "group": 1
        },
        {
          "name": "1f 2nd function",
          "group": 1
        },
        {
          "name": "1f 3rd function",
          "group": 1
        },
        {
          "name": "1f 4th function",
          "group": 1
        }
      ],
      "group": 1,
    },
    {
      "name": "2nd file",
      "children": [{
          "name": "2f 1st function",
          "group": 2
        },
        {
          "name": "2f 2nd function",
          "group": 2
        }
      ],
      "group": 2
    },
    {
      "name": "3rd file",
      "children": [{
        "name": "3f 1st function",
        "group": 3
      }],
      "group": 3
    },
    {
      "name": "4th file",
      "children": [{
          "name": "4f 1st function",
          "group": 4
        },
        {
          "name": "4f 2nd function",
          "group": 4
        },
        {
          "name": "4f 3rd function",
          "group": 4
        }
      ],
      "group": 4
    }
  ],
  "group": 0
};

const colorScale = d3.scaleOrdinal()
  .domain(d3.range(5))
  .range(d3.schemeDark2);

const width = 500,
  height = 400;

let i = 0;

const root = d3.hierarchy(data);
const transform = d3.zoomIdentity;
let node, link;

const svg = d3.select('body').append('svg')
  .call(d3.zoom().scaleExtent([1 / 2, 8]).on('zoom', zoomed))
  .append('g')
  .attr('transform', 'translate(40,0)');
...


update()

body {
  background-color: #E6E6E6;
}

svg {
  width: 100vw;
  height: 100vh;
}

.node {
  pointer-events: all;
  cursor: pointer;
  z-index: 1000;
}

.node text {
  font: 8px sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

In D3 Hierarchy Typescript, every parent-child duo is assigned the same color

Answer №1

Similar questions

Failure when running npm start command in Nest js

TS-Recursive JSON type is not compatible with variables in the node value

Choose the Enum in a dynamic manner

Determining the exact number of immediate descendants within a ul element, while disregarding any script elements

Finding the label that is linked to the current DIV or textarea by its "for" property

What could be causing the "Circular structure to JSON" error in Node.js when executing a MySQL query?

React/Ionic: Avoiding SVG rendering using <img/> elements

Exploring the power of Angular through the use of promises with multiple

Obtain environment variables within a Strapi plugin

problem with displaying sidebar in Ember template

Removing characters from a string with regular expressions

Angular 2 feature that allows for a single list value to be toggled with the

Retrieve the initial link value in jQuery and make changes to it

Issue encountered with updating canvas texture twice in A-Frame and pdf.js while operating in virtual reality mode

Ways to trigger Bootstrap modal through a PHP GET call

Converting a single 10GB zip file into five separate 2GB files with the help of NodeJS

Enhancing Selectpicker options in Angular using data fetched from a web service

Exploring the possibilities of integrating JSONP with Framework7

Compiler error occurs when trying to pass props through a higher-order component via injection

Execute local server's unit tests using a Gulp task