Мобильная версияЯ пытаюсь создать карту D3, которая позволит мне создавать текстовые абзацы под картой при нажатии на страны, выделенные синим цветом.
Изначально карта выглядит так:
При нажатии на синие страны генерируется текстовый абзац, в котором ниже приводится аннотация текста. Проблема заключается в том, что карта смещается в крайнее левое положение, когда текстовый абзац отображается, как показано здесь:
ссылка на среду разработки codeandbox: https://codesandbox.io/p/devbox/d3-worl ... sx&embed=1
JSX:
import React, { useEffect, useRef,useState} из «реагировать»; импортировать ReactDOM из «реагировать-дом»; импортировать * как d3 из «d3»; импортировать данные карты из "./Components/data.csv"; let visitCountries = ["США","Канада","Ирландия","Египет","Чехия","Германия","Франция","Греция","Исландия","Италия","Япония"," Лаосская Народно-Демократическая Республика», «Мексика», «Норвегия», «Польша», «Таиланд»]; функция RecieveCountry (реквизит) { пусть содержит = VisitCountries.includes(props.name); если(содержит){ возвращаться( Самые маленькие семьи удивляются достойному питомцу. Говоря ответную возлюбленную, она ответила ему многочисленными чувствами. Вечером, к счастью, сын сильно разоблачил генерала. Ревностно взялся за дело. Набор устраивает слишком уныние, сентябрьское счастье. Понятный инструмент или подключение без появления, приглашение. Сушить быстро вокруг или на заказ. Добавьте прошлое, см. запад, фетр, сделал что-нибудь. Произнеси шум, ты попробуешь веселую тарелку, которую ты поделишь. Пришло мое решение: мы должны удалить камеру. На продукцию указал полковник. Всего четыре проданных нужно над каким-нибудь. В сентябре подозрения взяли верх, и он признался. На адаптированном как проставленном лимите. Дарю двоюродному брату теплые вещи, не весенние, мистер уезжаю за границу. Отношения по разведению будут повторяться, строго следуя Маргарет. Одна серьезность сына вызвала застенчивость в ожидании обычного ведущего ветчины.
); }еще{ возвращаться( ); } } const WorldMap = () => { константная ссылка = useRef(); const ref2 = useRef(); const [Страна, setCountry] = useState(""); useEffect(() => { // устанавливаем размеры и поля графика константная ширина = 900; константная высота = 900; константа SVG = d3 .select(ref.current) .append("SVG") .attr("ширина", ширина) .attr("высота",высота) // Карта и проекция константный путь = d3.geoPath(); константная проекция = d3.geoMercator() .center([0,20]) .translate([ширина/2, высота/2]); // Данные и цветовая шкала константные данные = новая карта(); const colorScale = d3.scaleLinear() .домен([0,1]) .range(["серый","синий"]); // Загружаем внешние данные и загружаемся Обещание.все([ d3.json("https://raw.githubusercontent.com/holtz ... ld.geojson"), d3.csv("https://raw.githubusercontent.com/holtz ... lation.csv", function(d) { data.set(d.code, +d.visited) })]).then(function(loadData){ пусть топо = loadData[0] пусть mouseOver = функция (d) { d3.selectAll(".Страна") .переход() .длительность(200) .style("непрозрачность", .5) d3.select(это) .переход() .длительность(200) .style("непрозрачность", 1) .style("обводка", "черный") } пусть mouseLeave = функция (d) { d3.selectAll(".Страна") .переход() .длительность(200) .style("непрозрачность", .8) d3.select(это) .переход() .длительность(200) .style("обводка", "прозрачный") } let mouseClick = функция (событие, d) { d3.selectAll(".Страна") .переход() .длительность(200) .style("непрозрачность", 0,8); d3.select(это) .переход() .длительность(200) .style("обводка", "прозрачный"); setCountry(d.properties.name); console.log(d.properties.name); }; // Рисуем карту svg.append("г") .selectAll("путь") .data(topo.features) .входить() .append("путь") // рисуем каждую страну .attr("d", d3.geoPath() .projection(проекция) ) // устанавливаем цвет каждой страны .attr("заполнить", функция (d) { d.total = data.get(d.id) || 0; вернуть colorScale(d.total); }) .style("обводка", "прозрачный") .attr("класс", function(d){ return "Страна" } ) .style("непрозрачность", .8) .on("наведение мыши", наведение мыши) .on("mouseleave", mouseLeave ) .on("клик", mouseClick); // Прикрепляем функцию mouseClick }); }, [Страна]); return ; }; функция Приложение() { возвращаться ( ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render( );
CSS:
html, тело { маржа: 0; ширина: 100%; высота: 100%; } .кругосветное путешествие{ дисплей: гибкий; гибкое направление: столбец; выровнять-сам: центр; } .Текст{ черный цвет; размер шрифта: 20 пикселей; }
