[英]How to import and use D3-tube-map in react.js
我在我的 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;
是的,您的导入不太正确。 如果您查看此模块的 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.
使用最新版本的 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>
)
}
}
笔记
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.