Как задать собственные цвета для прямоугольников в реагирующей d3-древовидной карте на основе поля в наборе данных json?

Question

Как задать собственные цвета для прямоугольников в реагирующей d3-древовидной карте на основе поля в наборе данных json? Карта дерева d3 должна менять цвет в соответствии с данными, переданными в json. здесь я использую модуль npm response-d3-treemap для генерации древовидной карты, все отлично работает, кроме этого сценария использования. Предположим, что поле имени в наборе данных - это аналитика, мне нужен определенный цвет.

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 }
                        ]
                    }
                ]
            },
    {...},
{...}
    ]
    }

И сторона реакции это..

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;

В данных JSON, если значение "имя": "кластер", то я хочу определенный цвет для этого прямоугольника, как этого добиться? любое решение или предложения??

Answer 1

С помощью ^1.0.15, похоже, что цвета определяются программно, в зависимости от количества узлов и т. д. Однако вы можете указать диапазон цветов:

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

По умолчанию используется chromatic.interpolateGreens, но следующее используется для определения цвета, если оба bgColorRanges указаны:

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