изменить текст SVG на перенос слов CSS

Следующий код используется для отображения текстовых меток на диаграмме дерева JavaScript.

nodeEnter.append("svg:text")
        .attr("x", function(d) { return d._children ? -8 : -48; }) /*the position of the text (left to right)*/
        .attr("y", 3) /*the position of the text (Up and Down)*/

        .text(function(d) { return d.name; });

При этом используется svg, у которого нет возможности переноса слов. Как я могу изменить это сделать обычный абзац

чтобы я мог использовать css для переноса слов. Как мне сделать этот обычный текст, а не текст SVG?

12 голосов | спросил user1704514 1 +04002012-10-01T21:13:04+04:00312012bEurope/MoscowMon, 01 Oct 2012 21:13:04 +0400 2012, 21:13:04

4 ответа


0

Возможно, вы захотите использовать тег SVO foreignObject, поэтому у вас будет что-то вроде этого:

nodeEnter.append("foreignObject")
    .attr("x", function(d) { return d._children ? -8 : -48; }) /*the position of the text (left to right)*/
    .attr("y", 3) /*the position of the text (Up and Down)*/
    .attr("width", your_text_width_variable)
    .attr("height", your_text_height_variable)
    .append("xhtml:body")
    .append("p")
    .text(function(d) { return d.name; });

Вот подсказка Майка Бостока, которая мне помогла: https://gist.github.com/1424037

ответил Matti John 1 +04002012-10-01T23:14:57+04:00312012bEurope/MoscowMon, 01 Oct 2012 23:14:57 +0400 2012, 23:14:57
0

Это пример кода для переноса текста в D3:

var nodes = [
    {title: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut"}
]

var w = 960, h = 800;

var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);

var vSeparation = 13, textX=200, textY=100, maxLength=20

var textHolder = svg.selectAll("text")
    .data(nodes)
    .enter().append("text")
    .attr("x",textX)
    .attr("y",textY)
    .attr("text-anchor", "middle")
    .each(function (d) {
        var lines = wordwrap(d.title, maxLength)

        for (var i = 0; i < lines.length; i++) {
            d3.select(this).append("tspan").attr("dy",vSeparation).attr("x",textX).text(lines[i])
        }
    });


function wordwrap(text, max) {
    var regex = new RegExp(".{0,"+max+"}(?:\\s|$)","g");
    var lines = []

    var line
    while ((line = regex.exec(text))!="") {
        lines.push(line);
    } 

    return lines
}
ответил IsidroGH 12 AM00000020000003931 2013, 02:15:39
0

foreignObject не поддерживается IE, а Chrome не поддерживает переходы по нему. Если с этими ограничениями все в порядке, я рекомендую использовать foreignObject, потому что вы получаете все форматирование HTML + CSS.

Если вам нужна поддержка IE или переходов, я предлагаю использовать плагин D3, например D3plus . Это делает перенос текста очень простым.

d3plus.textwrap()
  .container('selector')
  .draw();

Оформите документы , чтобы ознакомиться со всеми его функциями.

ответил 4 J0000006Europe/Moscow 2015, 19:15:53
0

Вы можете использовать эту универсальную функцию, используя D3.js, чтобы обернуть текст в элементе svg: text в несколько дочерних элементов svg: tspan (по одному tspan на строку):

    function wrapText(text, width) {
        text.each(function () {
            var textEl = d3.select(this),
                words = textEl.text().split(/\s+/).reverse(),
                word,
                line = [],
                linenumber = 0,
                lineHeight = 1.1, // ems
                y = textEl.attr('y'),
                dx = parseFloat(textEl.attr('dx') || 0), 
                dy = parseFloat(textEl.attr('dy') || 0),
                tspan = textEl.text(null).append('tspan').attr('x', 0).attr('y', y).attr('dy', dy + 'em');

            while (word = words.pop()) {
                line.push(word);
                tspan.text(line.join(' '));
                if (tspan.node().getComputedTextLength() > width) {
                    line.pop();
                    tspan.text(line.join(' '));
                    line = [word];
                    tspan = textEl.append('tspan').attr('x', 0).attr('y', y).attr('dx', dx).attr('dy', ++linenumber * lineHeight + dy + 'em').text(word);
                }
            }
        });
    }

Вы можете использовать его следующим образом:

svg.selectAll('text').call(wrapText, 100);
ответил domenu 7 J000000Tuesday15 2015, 14:14:35

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

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132