Reactjs 来自react vis的树映射未按预期显示

我正在尝试使用

renderMode:'DOM'

，用于

模式：'circlePack'

，该模式应显示以下图像，仅当我将renderMode设置为'SVG'时，它才起作用：

当我将renderMode设置为“DOM”时，我得到以下结果：

onLeafClick

、

onLeafMouseOver

和

onLeafMouseOut

对设置为“SVG”的renderMode不起作用，我需要它们来执行某些操作

:

我的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;

从“React”导入React；
从'react vis'导入{Treemap}；
导入“/App.css”；
函数buGetData（）{
布达塔常数={
“儿童”：[
{
“类型”：“系统”，
“名称”：“系统2”，
“儿童严重性”：1，
“严重性”：1，
“大小”：1，
“apCount”：2，
“儿童”：[
{
“类型”：“区域”，
“名称”：“1区”，
“儿童严重性”：1，
“严重性”：3，
“大小”：1，
“apCount”：1，
},
{
“类型”：“区域”，
“名称”：“2区”，
“儿童严重性”：1，
“严重性”：4，
“大小”：1，
“apCount”：1，
}
]
},
{
“类型”：“系统”，
“名称”：“系统1”，
“儿童严重性”：1，
“严重性”：1，
“大小”：1，
“apCount”：2，
“儿童”：[
{
“类型”：“区域”，
“名称”：“1区”，
“儿童严重性”：1，
“严重性”：2，
“大小”：1，
“apCount”：1，
},
{
“类型”：“区域”，
“名称”：“2区”，
“儿童严重性”：1，
“严重性”：4，
“大小”：1，
“apCount”：1，
}
]
}
]
}
返回布达塔；
}
类BuApp扩展了React.Component{
状态={
hoveredNode:false，
buTreemapData:buGetData（），
UseCurclepacking:false
};
BuincidentSeverity颜色=[
"e0",，
"cf2b20",，
"ec5e33",，
"f4b344",，
“#f5eb50”
]
render（）{
const treeProps={
动画：{
阻尼：9，
刚度：300
},
数据：this.state.buTreemapData，
onLeafMouseOver：（leaf，event）=>{console.log（'onLeafMouseOver'+leaf.data.name）}，
onLeafMouseOut:（）=>this.setState（{hoveredNode:false}），
onLeafClick:（）=>this.setState（{buTreemapData:buGetData（）}），
身高：325，
模式：“circlePack”，
colorType:'文字'，
getLabel:x=>x.name，
颜色范围：['#e0']，
宽度：395，
//getSize:x=>x.apCount，
getColor:x=>this.buIncidentSeverityColors[x.severity]，
renderMode:'DOM'，
填充：5，
保证金：5
};
返回(
);
}
}
导出默认BuApp；

此时，您可能已经找到了答案，但由于我最近遇到了这个问题，我想我会为搜索的任何人发帖。添加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";