Squeak.ru - шаблоны программирования

как я могу использовать d3 для отображения div в фиксированной позиции над svg?

У меня есть реализация d3, которая отображает панели наведения над элементами при наведении курсора мыши. У меня есть новое требование отображать сводную панель того же стиля в правом нижнем углу svg. Вот код d3, который я использую для отображения панелей при наведении мыши:

d3.select('UnitedStatesTotalPanel')
    .style("top", (d3.event.pageY-10)+"px")
    .style("left", (d3.event.pageX+10)+"px");

Можно ли адаптировать этот код для отображения div поверх svg в фиксированном положении? Проблема в том, что приведенный выше код основан на возникновении события, поэтому кажется, что этот код необходимо будет адаптировать или изменить, чтобы обеспечить единовременное отображение элемента div.

javascript svg d3.js
11.01.2017

Ответы:


1

Вы можете использовать offsetTop и offsetLeft, чтобы получить позицию вашего SVG, а затем установить позицию ваш div соответственно.

Проблема в том, что SVG не поддерживает offsetTop/offsetLeft, поэтому вам придется обернуть SVG в <div>.

Чтобы показать div независимо от события mouseover, просто добавьте его, как любой другой обычный элемент.

Проверьте это демо:

var svgPosition = document.getElementById("mySvg");

var div = d3.select("body")
	.append("div")
	.attr("class", "fixedDiv");
	
div.html("This is a fixed div<br>based on SVG position")
	.style("top", svgPosition.offsetTop + 90 + "px")
	.style("left", svgPosition.offsetLeft + 10 + "px");
svg {
    background-color: tan;
}

.fixedDiv {
    position: absolute;
    padding: 4px;
    border: 1px solid gray;	
    border-radius: 4px;
    background-color: lightblue;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<div style="float:left; padding:4px;">Lorem ipsum<br>dolor sit amet</div>
<div style="overflow:hidden;" id="mySvg">
	<svg ></svg>
</div>

12.01.2017
Новые материалы
Угловая структура архитектуры
Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..
«Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..
Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...
Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..
Создайте API с помощью Python FastAPI
Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..
Веселье с прокси-сервером JavaScript
Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..
Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...