How to give custom colors to rectangles in react-d3-treemap based on a field in json dataset?

Question

How to give custom colors to rectangles in react-d3-treemap based on a field in json dataset? d3 treemap should change color according to data passed in json. here iam using the npm module react-d3-treemap to generate the treemap, everything works fine except this usecase. Suppose the name field in dataset is analytics i want a particular color .

JSON DATA

    {
        "name": "Sample Data",
        "children": [
            {
                "name": "analytics",
                "link": "https://google.com",
                "children": [
                    {
                        "name": "cluster",
                        "children": [
                            { "name": "AgglomerativeCluster", "value": 3938, "link": "https://blog.josequinto.com" },
                            { "name": "CommunityStructure", "value": 3812 },
                            { "name": "HierarchicalCluster", "value": 6714 },
                            { "name": "MergeEdge", "value": 743 }
                        ]
                    },
                    {
                        "name": "graph",
                        "children": [
                            { "name": "BetweennessCentrality", "value": 3534 },
                            { "name": "LinkDistance", "value": 5731 },
                            { "name": "MaxFlowMinCut", "value": 7840 },
                            { "name": "ShortestPaths", "value": 5914 },
                            { "name": "SpanningTree", "value": 3416 }
                        ]
                    },
                    {
                        "name": "optimization",
                        "children": [
                            { "name": "AspectRatioBanker", "value": 7074 }
                        ]
                    }
                ]
            },
    {...},
{...}
    ]
    }

And the react side is..

import React from 'react';
import TreeMap from "react-d3-treemap";
import "react-d3-treemap/dist/react.d3.treemap.css";

class DataExplorerComponent extends React.Component {
    constructor(props) {
        super(props)
        console.log("Propzzz---->>",this.props)
    this.state = {
    }
    }
    componentWillMount() {     
    }
    render(){

        return( 
            <div className="col-xs-10 col-sm-10 col-md-11 data-explorer-container-area">
                <div className="row">
                <h1>TREEMAP</h1>
                </div>
                <TreeMap
                    height={500}
                    width={800}
                    data={this.props.chartdata}
                    valueUnit={"Units"}
                />
             </div>        
        )
    }
}

 export default  DataExplorerComponent;

In the JSON data if the value "name": "cluster" then i want a particular color for that rectangle, how to achieve this? any solution or suggestions??

Answer 1

Using ^1.0.15, it looks like colors are determined programmatically, based on the number of nodes, etc. You can specify a color range though:

<TreeMap data={data} bgColorRangeLow={"#000"} bgColorRangeHigh={"#fff"} />

The default setting is to use chromatic.interpolateGreens, but the following is used to determine color if both bgColorRanges are specified:

this._nodesbgColorFunction = scaleLinear<any>()
    .domain(d)
    .interpolate(interpolateHcl)
    .range([this.props.bgColorRangeLow, this.props.bgColorRangeHigh]);