Treemap from from react-vis Not Displaying As Expected

Question

I am trying to use renderMode: 'DOM', for mode: 'circlePack', which should display the following image, it only works when I have renderMode set to 'SVG':

When I set renderMode to 'DOM', I get the following,

1. onLeafClick, onLeafMouseOver and onLeafMouseOut don't work on renderMode set to 'SVG' and I need them for on performing some actions

:

My React Component Code is as follows:

import React from 'react';

import {Treemap} from 'react-vis';

import './App.css';

function buGetData() {
  const buData = {
    "children": [
      {
        "type": "system",
        "name": "System 2",
        "children_severity": 1,
        "severity": 1,
        "size": 1,
        "apCount": 2,
        "children": [
          {
            "type": "zone",
            "name": "Zone 1",
            "children_severity": 1,
            "severity": 3,
            "size": 1,
            "apCount": 1,
          },
          {
            "type": "zone",
            "name": "Zone 2",
            "children_severity": 1,
            "severity": 4,
            "size": 1,
            "apCount": 1,
          }
        ]
      },
      {
        "type": "system",
        "name": "System 1",
        "children_severity": 1,
        "severity": 1,
        "size": 1,
        "apCount": 2,
        "children": [
          {
            "type": "zone",
            "name": "Zone 1",
            "children_severity": 1,
            "severity": 2,
            "size": 1,
            "apCount": 1,
          },
          {
            "type": "zone",
            "name": "Zone 2",
            "children_severity": 1,
            "severity": 4,
            "size": 1,
            "apCount": 1,
          }
        ]
      }
    ]
  }

  return buData;
}

class BuApp extends React.Component {
  state = {
    hoveredNode: false,
    buTreemapData: buGetData(),
    useCirclePacking: false
  };
  buIncidentSeverityColors = [
    '#e0e0e0',
    '#cf2b20',
    '#ec5e33',
    '#f4b344',
    '#f5eb50'
  ]

  render() {
    const treeProps = {
      animation: {
        damping: 9,
        stiffness: 300
      },
      data: this.state.buTreemapData,
      onLeafMouseOver: (leaf, event) => { console.log('onLeafMouseOver ' + leaf.data.name)},
      onLeafMouseOut: () => this.setState({hoveredNode: false}),
      onLeafClick: () => this.setState({buTreemapData: buGetData()}),
      height: 325,
      mode: 'circlePack',
      colorType: 'literal',
      getLabel: x => x.name,
      colorRange: ['#e0e0e0'],
      width: 395,
      // getSize: x => x.apCount,
      getColor: x => this.buIncidentSeverityColors[x.severity],
      renderMode: 'DOM',
      padding: 5,
      margin: 5
    };
    return (
      <div className="dynamic-treemap-example">
        <div className="bu-nested-tree">
          <Treemap {...treeProps} />
        </div>
      </div>
    );
  }
}

export default BuApp;

Answer 1

At this point you've probably figured it out, but since I recently encountered this issue, figured I would post for anyone searching. Adding the react-vis stylesheet fixed the problem for the "DOM" renderMode.

<link rel="stylesheet" href="https://unpkg.com/react-vis/dist/style.css">
<script type="text/javascript" src="https://unpkg.com/react-vis/dist/dist.min.js"></script>

or

@import "~react-vis/dist/style";

Sources:

https://github.com/uber/react-vis

https://github.com/uber/react-vis/issues/789