Как импортировать и использовать D3-tube-map в react.js
Я импортировал карту трубок из d3.js в свой проект reactjs. Но возникает следующая проблема из-за неправильного импорта. Проблема, которую я получаю, показана на снимке ниже:
Ниже приведен код, который я использую. Я установил 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.info(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;
Поскольку мне нужно было решение, и здесь может быть недостаток замечательных вопросов, я не знаю почему.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.
Большое спасибо за уделенное время @Todd. Я только что попробовал первое решение, которое заключается в импорте только d3-tube-map, и оно вызывает ошибку - d3.tubeMap не является функцией, а также попробовал второй вариант для импорта как d3-tube-map, так и d3-tube-map, и этот случай также вызывает ошибку - Uncaught TypeError: _d2.default.tubeMap не является функцией .
@Subhojit Я не уверен, как правильно выполнить импорт, но в качестве следующего шага вам следует открыть проблему в репозитории git. А пока, если вы хотите опубликовать свой код на jsfiddle.net и добавить ссылку на свой вопрос, я буду рад увидеть, смогу ли я заставить его работать и обновить свой ответ.
Привет, Тодд, я поделился ссылкой на редактор здесь - stackblitz.com/edit/react-9sfz89
Проблема была решена, поскольку мне не хватало правильного импорта атрибута из библиотеки d3-tube-map, поэтому я использовал импортировать * как tubeMap из 'd3-tube-map', и проблема была решена. Спасибо @Todd за попытку помочь.
Это рабочая демонстрация - stackblitz.com/edit/react-9sfz89
@Subhojit Спасибо, что ответили на это. Я добавил ваш рабочий код из ссылки к своему ответу на случай, если он кому-то поможет.
Конечно. Хорошо, если это кому-то поможет @Todd
@Subhojit Я попробовал вашу демонстрацию и получил "export 'tubeMap' (imported as 'd3') was not found in 'd3', знаете, как это исправить? они сказали, что это вызвано использованием синтаксиса v3 для v4 из d3, но я вижу в библиотеке, которую он использовал v5
@ HoàngĐăng проверьте файл package.json моей рабочей демонстрации и сравните версию d3 и tubemap с вашим проектом package.json. Вот я использую "d3": "^ 5.7.0", "d3-tip": "0.9.1", "d3-tube-map": "0.6.0"
@Subhojit благодарю за отзыв, я избавляюсь от предупреждений, используя этот const d3 = Object.assign(d3Base, { tubeMap.tubeMap }); вместо d3.tubeMap = tubeMap
По какой причине вы удалили ваш вопрос из 2018-11-16 09: 33: 17Z stackoverflow.com/questions/53334987/… и разместили тот же вопрос через 30 часов в 2018-11-17 14: 35: 40Z? Это третий раз, когда вы публикуете тот же вопрос