Визуализация D3Plus с ReactJS

Question

Я пытаюсь запустить пример из этой ссылки , но единственное, что я получаю, - это серое поле (когда я нажимаю на него, ничего не происходит). Я использую пакет d3plus-Reaction версии 0.5.2 с реакцией версии 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-реакции-приложение

Answer 1

Похоже, вы должны использовать groupBy: ["group", "name"] вместо id.

К сожалению, связанная визуализация Grouped TreeMap относится к версии 1.0 d3Plus, здесь вы можете увидеть старые примеры, в том числе упомянутые https://d3plus.org/examples/1.0/. d3Plus -act использует версию 2.0 d3Plus и при использовании компонент Treemap, который вы используете d3plus -ierarchy , и в этом случае визуализация сгруппированной выглядит следующим образом https://d3plus.org/examples/d3plus-hierarchy/getting-started/, без интерактивности, которую вы хотите при нажатии.

Чтобы показать подсказку со значением в этой версии, необходимо 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}`
  }
}