title: How to give custom colors to rectangles in react-d3-treemap based on a field in json dataset?
body: <p>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 .</p>
  
  <p>JSON DATA</p>
  
  <pre><code>    {
          "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 }
                          ]
                      }
                  ]
              },
      {...},
  {...}
      ]
      }
  </code></pre>
  
  <p>And the react side is..</p>
  
  <pre><code>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----&gt;&gt;",this.props)
      this.state = {
      }
      }
      componentWillMount() {     
      }
      render(){
  
          return( 
              &lt;div className="col-xs-10 col-sm-10 col-md-11 data-explorer-container-area"&gt;
                  &lt;div className="row"&gt;
                  &lt;h1&gt;TREEMAP&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;TreeMap
                      height={500}
                      width={800}
                      data={this.props.chartdata}
                      valueUnit={"Units"}
                  /&gt;
               &lt;/div&gt;        
          )
      }
  }
  
   export default  DataExplorerComponent;
  </code></pre>
  
  <blockquote>
    <p>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??</p>
  </blockquote>