代码之家 › 专栏 › 技术社区 › Subhojit

如何在中导入和使用D3管图react.js公司

react-component react-redux d3.js reactjs javascript

Subhojit · 技术社区 · 6 年前

下面是我使用的代码。我用npm安装了d3管图。也许我缺少正确导入d3管图的导出值。关于这个问题有什么帮助吗?

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;

1 回复 | 直到 6 年前

Todd Chaffee 6 年前

是的,你们的进口货不对。如果您查看 npm page for this module

<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()

如果以上不起作用,你可能需要同时导入d3和d3管映射,在这种情况下,我不确定它们应该如何作为导入一起工作。如果是这样的话,我会在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.