d3.js 如何在react.js中导入和使用D3-tube-map

zy1mlcev 于 2022-11-12 发布在 React

关注(0)|答案(2)|浏览(174)

我已经在我的reactjs项目中从d3.js导入了tube-map。但是因为没有正确导入它而遇到了以下问题。我遇到的问题如下图所示：

以下是我正在使用的代码。我已经使用npm安装了d3-tube-map。可能我在正确导入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;

d3.js

来源：https://stackoverflow.com/questions/53352210/how-to-import-and-use-d3-tube-map-in-react-js

2条答案

按热度按时间

j2cgzkjk1#

是的，你的导入不太正确。如果你看一下npm page for this module上提供的例子，它同时使用了d3和d3-tube-map。

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

这提供了一个线索，但对于如何使用ES6导入没有太大帮助。查看module over on 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.

赞(0）回复(0）举报 2022-11-12

imzjd6km2#

用最新版本的d3和d3-tube-map没有一个答案工作。我尝试了一切。

解决方案（解决方法）如下所示

import React, { Component } from 'react';
import tubeData from './data';
import './TubeMap.css';

const d3 = require('d3');
const tubeMap = require('d3-tube-map');

export default class TubeMap extends Component {

    componentDidMount() {
        d3.tubeMap = tubeMap.tubeMap;
        d3.select('#tube-map').html(null);

        this.renderMap();
    }
    renderMap() {

        var container = d3.select('#tube-map');
        var width = 700;
        var height = 700;

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

        container.datum(tubeData).call(map);
    }

    render() {
        return (
            <div id="tube-map"></div>
        )
    }
}

备注

1.不要导入d3或d3-tubemap（d3-tip在这种情况下也是无用的）
1.使用require初始化d3和d3-tubemap
1.将tubeMap添加到componentDidMount中的d3。我正在清除html，因为componentDidMount被调用了两次

赞(0）回复(0）举报 2022-11-12

我来回答

d3.js 如何在react.js中导入和使用D3-tube-map

2条答案

相关问题

热门标签

最新问答