Как разместить текст над кругом?

У меня есть код для создания круга, и я хотел бы разместить текст поверх него.

Я использую это для своего примера: https://bl.ocks.org/mbostock/raw/7341714/

    infoHeight = 200
    infoWidth = 200

    var compareSVG = d3.select(".info-container")
                .append("svg")
                .attr("class","comparison-svg")
                .attr("width", infoWidth)
                .attr("height", infoHeight);

    var circle = compareSVG.append("g")

    circle.append("circle")
    .attr("r", circleRadius(d.properties.contextvalue))
    .attr("cy", infoHeight/2)
    .attr("cx", infoWidth/2)
    .style("fill","grey")
    .style("stroke","black")
    .style("stroke-width","3px")

    circle.append("text")
    .text(d.properties.contextvalue)
    .style("display", "block")
    .style("y", infoHeight/2)
    .style("x", infoHeight/2)
    .style("color","red")
    .style("font-size","20px")

Круг работает, но текст не появляется поверх него. Вместо этого он находится в верхнем левом углу элемента SVG. Я пробовал position: absolute вместе с top и left, и он остается в том же углу.

javascript d3.js svg

15.03.2019 08:36

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В D3 методы attr используют Element.setAttribute внутри, а style используют CSSStyleDeclaration.setProperty().

В элементе SVG <text>x и y равны атрибуты. Поэтому измените эти style() методы на attr(). Также избавьтесь от этого .style("display", "block").

Итак, должно быть:

circle.append("text")
    .text(d.properties.contextvalue)
    .attr("y", infoHeight/2)
    .attr("x", infoHeight/2)
    .style("color","red")
    .style("font-size","20px")

Вот ваш код с этим изменением:

infoHeight = 200
infoWidth = 200

var compareSVG = d3.select("body")
  .append("svg")
  .attr("width", infoWidth)
  .attr("height", infoHeight);

var circle = compareSVG.append("g")

circle.append("circle")
  .attr("r", 50)
  .attr("cy", infoHeight / 2)
  .attr("cx", infoWidth / 2)
  .style("fill", "lightgrey")
  .style("stroke", "black")
  .style("stroke-width", "3px")

circle.append("text")
  .text("Foo Bar Baz")
  .attr("y", infoHeight / 2)
  .attr("x", infoHeight / 2)
  .style("color", "red")
  .style("font-size", "20px")

<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Наконец, обратите внимание на положение текста: он не введен (относительно круга). Если вы хотите центрировать его, используйте text-anchor и dominant-baseline:

infoHeight = 200
infoWidth = 200

var compareSVG = d3.select("body")
  .append("svg")
  .attr("width", infoWidth)
  .attr("height", infoHeight);

var circle = compareSVG.append("g")

circle.append("circle")
  .attr("r", 50)
  .attr("cy", infoHeight / 2)
  .attr("cx", infoWidth / 2)
  .style("fill", "lightgrey")
  .style("stroke", "black")
  .style("stroke-width", "3px")

circle.append("text")
  .text("Foo Bar Baz")
  .attr("y", infoHeight / 2)
  .attr("x", infoHeight / 2)
  .attr("text-anchor", "middle")
  .attr("dominant-baseline", "central")
  .style("color", "red")
  .style("font-size", "20px")

<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

В чем разница между атрибутом и стилем? Мой ответ новичка заключается в том, что стиль относится к CSS, а атрибуты относятся к HTML.

— 15.03.2019 09:37

@Cauder, это немного сложнее. Я добавил первый абзац с некоторыми ссылками, пожалуйста, посмотрите.

— 15.03.2019 09:43

15.03.2019 09:33

Другие вопросы по теме

Гистограмма с накоплением D3 не может видеть полные метки оси X

Может ли d3 передать событие наведения указателя мыши нижележащему слою?

Используйте объект R data.frame в d3.js, используя r2d3

Графики D3 — JS — Добавление часов ко времени

Динамическая фильтрация с помощью библиотеки D3

Метод выхода из горизонтальной гистограммы не работает

Добавление всплывающих подсказок к интерактивной диаграмме D3 в D3

Сопоставить элементы в наборе данных с идентификатором div

Обработка события mousedown объекта наложения d3

Ячейки Вороного зашкаливают в силовой компоновке

Как разместить текст над кругом?

Ответы 1

Другие вопросы по теме

Похожие вопросы