Как импортировать и использовать D3-tube-map в react.js

Question

Я импортировал трубу-карту из d3.js в моем проекте ReactionJS.Но, получив следующую проблему, вы не импортировали ее должным образом.Проблема, которую я получаю, показана ниже:

Ниже приведен код, который я использую.Я установил d3-tube-map, используя npm.Возможно, мне не хватает правильного импорта экспортированного значения d3-tube-map.Любая помощь по этому вопросу?

import React, { Component } from "react";
// import d3 from "d3";
import d3 from "d3-tube-map";
import "d3-tip";
import tubeData from "./JSON/tube_data.jsx";

class TubeMap extends Component {
    componentDidMount() {
        var container = d3.select("#tube_map_101");
        var width = 700;
        var height = 400;

        var map = d3
            .tubeMap()
            .width(width)
            .height(height)
            .margin({
                top: 20,
                right: 20,
                bottom: 40,
                left: 100
            })
            .on("click", function(name) {
                console.log(name);
            });

        // d3.json("./stations.json", function (error, data) {
        container.datum(tubeData).call(map);

        var svg = container.select("svg");

        zoom = d3
            .zoom()
            .scaleExtent([0.5, 6])
            .on("zoom", zoomed);

        var zoomContainer = svg.call(zoom);
        var initialScale = 2;
        var initialTranslate = [100, 200];

        zoom.scaleTo(zoomContainer, initialScale);
        zoom.translateTo(
            zoomContainer,
            initialTranslate[0],
            initialTranslate[1]
        );

        function zoomed() {
            svg.select("g").attr("transform", d3.event.transform.toString());
        }
        // });
    }

    render() {
        return <div id="tube_map_101" />;
    }
}

export default TubeMap;

Answer 1

Да, ваш импорт не совсем правильный.Если вы посмотрите на пример, приведенный на странице npm для этого модуля , он использует и d3, и d3-tube-map.

<script src="https://d3js.org/d3.v4.js"></script>
<script src="../dist/d3-tube-map.js"></script>

, который дает подсказку, но не даетмного помочь с тем, как сделать это с помощью импорта ES6.Глядя на код для модуля на github , я бы попробовал сначала (за исключением многих строк):

import tubeMap from "d3-tube-map";

...

    var map = tubeMap() 

Что я заметил на github, так это то, что модуль tubeMap уже импортирует d3внутри него.Поэтому, возможно, вам не нужно импортировать d3 самостоятельно.

Если вышеприведенное не сработает, возможно, вам придется импортировать как d3, так и d3-tube-map, и в этом случае я не уверен, как онидолжны работать вместе как импорт.Если это так, я бы открыл вопрос на github с автором, чтобы получить пример.

РЕДАКТИРОВАТЬ: Как выяснилось, вам нужно импортировать все компоненты из каждого модуля согласно фрагменту кода ниже.

import * as d3 from "d3";
import * as tubeMap from "d3-tube-map";
import tubeData from "./data/tubeData.jsx";

class TubeMap extends Component {
    componentDidMount () {
      d3.tubeMap = tubeMap.tubeMap
      this.renderMap()
    }


    renderMap() {
        var container = d3.select("#tube_map_101");
        var width = 700;
        var height = 400;

        var map = d3
            .tubeMap()
            .width(width)
            .height(height)

etc.