0

如何根据json数据集中的字段为react-d3-treemap中的矩形赋予自定义颜色？d3 treemap 应该根据 json 中传递的数据改变颜色。这里 iam 使用 npm 模块 react-d3-treemap 来生成树形图，除了这个用例之外，一切正常。假设数据集中的名称字段是我想要特定颜色的分析。

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 数据中，如果值为“名称”：“集群”，那么我想要该矩形的特定颜色，如何实现这一点？任何解决方案或建议？

4

1 回答 1

0

使用^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]);
于 2020-08-26T14:24:25.620 回答