使用 ReactJS 的 D3Plus 可视化

Question

我正在尝试运行来自此 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 创建的应用程序

Answer 1

看来你必须使用 groupBy: ["group", "name"] 而不是 id。

不幸的是，链接的 Grouped TreeMap 可视化来自 d3Plus 的 1.0 版，您可以在这里看到旧示例，包括提到的 https://d3plus.org/examples/1.0/. d3Plus-react uses version 2.0 of d3Plus and when using the Treemap component you are using d3plus-hierarchy and in this case a gruped visualization looks like this 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}`
  }
}

使用 ReactJS 的 D3Plus 可视化

D3Plus Visualization with ReactJS

javascript

d3.js

reactjs

d3plus