0

JSONデータセットのフィールドに基づいて、react-d3-treemapの長方形にカスタムカラーを与える方法は? d3 ツリーマップは、json で渡されたデータに従って色を変更する必要があります。ここでは、npm モジュールの react-d3-treemap を使用してツリーマップを生成しています。このユースケース以外はすべて正常に動作します。データセットの名前フィールドが analytics i want a specific color であるとします。

JSON データ

    {
        "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 データで、値が "name": "cluster" の場合、その四角形に特定の色が必要ですが、これを実現するにはどうすればよいですか? 解決策や提案は??

4

1 に答える 1