我正在尝试使用renderMode: 'DOM', for 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;