来自 react-vis 的树状图未按预期显示

Question

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

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

1. 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;

Answer 1

在这一点上，您可能已经想通了，但自从我最近遇到这个问题以来，我想我会为任何搜索的人发帖。 添加 react-vis 样式表修复了“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>

或者

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

资料来源：

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

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