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 に答える