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 矩形内写一个段落的任何漂亮方法？谢谢，

4

5 回答 5

16

这个问题的答案可能是相关的。SVG 不提供自动包装文本的方法，但您可以在 SVG 中嵌入 HTML，然后使用div例如。

我在这里更新了 jsfiddle ，但它与动画配合得不太好。如果你想让它正常工作并且表现得像任何其他 SVG 元素，你必须预先计算换行符并手动插入它们。

于 2012-06-13T08:58:14.233 回答
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)");
于 2013-03-12T15:02:17.490 回答
3

这种技术可能会派上用场。它适用于当前的 svg 规范并且没有 foreignObject 元素 http://bl.ocks.org/mbostock/7555321

于 2014-07-23T08:03:09.837 回答
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");
于 2015-02-17T19:02:57.993 回答
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");
于 2016-05-06T19:30:36.157 回答