使用 ReactJS 进行 D3Plus 可视化

Question

I'm trying to run the example from this Link , but the only thing I get is a grey box (nothing happens when I click it). I'm using the d3plus-react package, version 0.5.2 with react version 16.7.0. Here is my code:

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;

I would appreciate any help :) ps: I forgot to mention that I created the app with create-react-app

Answer 1

It seems like you have to use groupBy: ["group", "name"] instead of id .

Unfortunately, the linked Grouped TreeMap visualization is from version 1.0 of d3Plus, you can see here the old examples including the mentioned 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/ , without the interactivity you want on click.

To show the tooltip with the value in this version it's necessary to pass tooltipConfig configuration.

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}`
  }
}