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

Вписать текст в элемент SVG (с использованием D3/JS)

Я хочу написать текст внутри прямоугольника, который я создаю следующим образом:

body = d3.select('body')

svg = body.append('svg').attr('height', 600).attr('width', 200)

        rect = svg.append('rect').transition().duration(500).attr('width', 150)
                        .attr('height', 100)
                        .attr('x', 40)
                        .attr('y', 100)
                        .style('fill', 'white')
                        .attr('stroke', 'black')

        text = svg.append('text').text('This is some information about whatever')
                        .attr('x', 50)
                        .attr('y', 150)
                        .attr('fill', 'black')​

Однако, как вы видите (http://jsfiddle.net/Tmj7g/3/), текст обрезается. Любые изящные способы написать абзац внутри созданного прямоугольника svg? Спасибо,

javascript text svg d3.js
13.06.2012

Ответы:


1

Ответ на этот вопрос может иметь значение. SVG не обеспечивает автоматического переноса текста, но вы можете встроить HTML в SVG, а затем использовать, например, div.

Я обновил jsfiddle здесь, но он не очень хорошо работает вместе с анимацией. Если вы хотите, чтобы он работал правильно и вел себя как любой другой элемент SVG, вам придется предварительно вычислить разрывы строк и вставить их вручную.

13.06.2012
  • Это работает в IE9? Если да, то каковы альтернативы? Я знаю, что на этот вопрос давно ответили. 05.06.2013
  • Да, это вообще не работает в IE9, потому что он не поддерживает посторонние объекты. Есть ли альтернативы переносу текста в D3.js? 05.06.2013
  • Это не столько проблема D3, сколько проблема SVG. Если вам не нужна красивая графика, вы можете просто сгенерировать HTML. Если вам нужен SVG, вы можете использовать его элементы tspan, например, для переноса текста, но это гораздо менее удобно. 05.06.2013

    • 2

    Чтобы заставить его работать с анимацией, просто заключите элемент группы и вместо этого анимируйте его. http://jsfiddle.net/MJJEc/

    body = d3.select('body')
svg = body.append('svg')
                    .attr('height', 600)
                    .attr('width', 200);
    var g = svg.append('g').attr("transform" ,"scale(0)");
    rect = g.append('rect')
                    .attr('width', 150)
                    .attr('height', 100)
                    .attr('x', 40)
                    .attr('y', 100)
                    .style('fill', 'none')
                    .attr('stroke', 'black')
    text = g.append('foreignObject')
                    .attr('x', 50)
                    .attr('y', 130)
                    .attr('width', 150)
                    .attr('height', 100)
                    .append("xhtml:body")
                    .html('<div style="width: 150px;">This is some information about whatever</div>')

    g.transition().duration(500).attr("transform" ,"scale(1)");
    12.03.2013

    3

    Эта техника может пригодиться. Он работает с текущей спецификацией SVG и без элемента ForeignObject http://bl.ocks.org/mbostock/7555321< /а>

    23.07.2014
  • Хотя эта ссылка может ответить на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы только по ссылкам могут стать недействительными, если связанная страница изменится. 04.02.2015

    • 4

    У меня была аналогичная проблема, и я нашел разумное решение, рассчитав ширину моего окна. Во-вторых, я выяснил, что в среднем ширина символа для моего текущего шрифта составляет около 8. Далее я просто делаю подстроку в тексте, который нужно отобразить. Кажется, что это работает отлично в большинстве случаев.

    var rectText = rectangles.append("text")
    .text(function(d) {

        TextBoxLength = timeScale(dateFormat.parse(d.endTime)) - timeScale(dateFormat.parse(d.startTime));
        return d.task.substring(0, Math.floor(TextBoxLength / 8));
    })
    .attr("x", function(d) {
        return (timeScale(dateFormat.parse(d.endTime)) - timeScale(dateFormat.parse(d.startTime))) / 2 + timeScale(dateFormat.parse(d.startTime)) + theSidePad;
    })
    .attr("y", function(d, i) {
        return d.position * theGap + 14 + theTopPad;
    })
    .attr("font-size", 12)
    .attr("text-anchor", "middle")
    .attr("text-height", theBarHeight)
    .attr("fill", "#000000");
    17.02.2015

    5

    Другой подход, когда вы пытаетесь вписать прямую строку текста в элемент svg, может использовать стратегию, описанную в http://bl.ocks.org/mbostock/1846692:

    node.append("text")
  .text(function(d) { return d.name; })
  .style("font-size", function(d) { return Math.min(2 * d.r, (2 * d.r - 8) / this.getComputedTextLength() * 24) + "px"; })
  .attr("dy", ".35em");
    06.05.2016
    Новые материалы
    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: 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 и запросов...