我正在尝试从此Link运行示例,但是我唯一得到的是一个灰色框(单击它时什么也没有发生)。我正在使用d3plus-react软件包,版本0.5.2和react版本16.7.0。这是我的代码:
import React, { Component } from "react";
import { Treemap } from "d3plus-react";
const methods = {
data: [
{ value: 100, name: "alpha", group: "group 1" },
{ value: 70, name: "beta", group: "group 2" },
{ value: 40, name: "gamma", group: "group 2" },
{ value: 15, name: "delta", group: "group 2" },
{ value: 5, name: "epsilon", group: "group 1" },
{ value: 1, name: "zeta", group: "group 1" }
],
id: ["group", "name"],
size: "value"
};
class Hierarcy extends Component {
render() {
return (
<React.Fragment>
<Treemap config={methods} />
</React.Fragment>
);
}
}
export default Hierarcy;
我将不胜感激任何帮助 :)
ps:我忘了提到我使用create-react-app创建了应用程序
最佳答案
似乎您必须使用groupBy: ["group", "name"]
而不是id
。
不幸的是,链接的Grouped TreeMap可视化来自d3Plus的1.0版,您可以在此处看到包含所提及的https://d3plus.org/examples/1.0/的旧示例。 d3Plus-react使用d3Plus的2.0版,并且在使用Treemap组件时,您使用的是d3plus-hierarchy,在这种情况下,粗糙的可视化效果看起来像这样的https://d3plus.org/examples/d3plus-hierarchy/getting-started/,而没有您想要的交互性。
要在此版本中显示带有该值的工具提示,必须
通过tooltipConfig
配置。
const methods = {
groupBy: ["group", "name"],
data: [
{ value: 100, name: "alpha", group: "group 1" },
{ value: 70, name: "beta", group: "group 2" },
{ value: 40, name: "gamma", group: "group 2" },
{ value: 15, name: "delta", group: "group 2" },
{ value: 5, name: "epsilon", group: "group 1" },
{ value: 1, name: "zeta", group: "group 1" }
],
tooltipConfig: {
body: d => `<div>Value: ${d.value}</div>`,
title: d => `${d.name}`
}
}