将SVG文本更改为CSS包装 [英] change SVG text to css word wrapping

问题描述

以下代码用于显示JavaScript树形图的文本标签。

The following code is used to show the text labels of a javascript tree diagram.

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来自动换行。

This uses svg, which has no word wrapping ability. How do I change this do a normal paragraph

so that I may use css to word wrap it. How do I make this regular text and not svg text?

推荐答案

您可能想要使用SVG foreignObject标记，有这样的：

You probably want to use the SVG foreignObject tag, so you would have something like this:

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; });

以下是Mike Bostock提供的帮助我的主题： https://gist.github.com/1424037

Here is a gist by Mike Bostock which helped me: https://gist.github.com/1424037

这篇关于将SVG文本更改为CSS包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！