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