来自 react-vis 的树形图未按预期显示答案

【问题标题】：Treemap from from react-vis Not Displaying As Expected来自 react-vis 的树形图未按预期显示
【发布时间】：2020-01-04 16:16:56
【问题描述】：

我正在尝试将renderMode: 'DOM' 用于mode: 'circlePack'，它应该显示以下图像，它仅在我将renderMode 设置为'SVG' 时才有效：

当我将 renderMode 设置为“DOM”时，我得到以下信息，

onLeafClick、onLeafMouseOver 和 onLeafMouseOut 在 renderMode 设置为“SVG”时不起作用，我需要它们来执行某些操作

：

我的 React 组件代码如下：

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;

【问题讨论】：

标签： reactjs react-vis react-vis-network

【解决方案1】：

此时您可能已经弄清楚了，但是由于我最近遇到了这个问题，所以我想我会为任何搜索的人发帖。添加 react-vis 样式表解决了“DOM”渲染模式的问题。

<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>

或

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

来源：

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

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

【讨论】：