Вопрос по d3.js, svg, javascript, text – Разместить текст в элементе SVG (с использованием D3 / JS)

13

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

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-прямоугольника? Спасибо,

Ваш Ответ

5   ответов
3

Работает с текущей спецификацией svg и без элемента foreignObject http://bl.ocks.org/mbostock/7555321

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

и я нашел разумное решение, рассчитав ширину моей коробки. Во-вторых, я выяснил, что в среднем ширина символа для моего текущего шрифта составляет около 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");
16

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

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

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

просто включите в нее элемент группы и анимируйте его. 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)");
2

при попытке вписать прямую строку текста в элемент 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");

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