1

D3 を使用して、css web-font スタイルの svg テキスト要素を次々と配置する際に問題が発生しています。ロード時にテキスト要素を最初に配置すると、それらが重なります。

重なり合う言葉

ただし、遅延またはボタンを介してトリガーされた同じ関数を使用して要素を少し後に配置すると、それらは重なりません。

言葉を重ねない

問題はgetBBox()あり、getBoundingClientRect()どちらも最初は要素の適切な幅を返さないようです。

最初に正しい幅を取得する方法についてのアイデアはありますか?

JS は以下、例はこちら: http://bl.ocks.org/yanofsky/6618496 、完全なコードはこちら: https://gist.github.com/yanofsky/6618496

//helper function to grab transform coordinates 
function transformCoordOf(elem) {
    var separator = elem.attr("transform").indexOf(",") > -1 ? "," : " ";
    var trans = elem.attr("transform").split(separator);
    return { x: (trans[0] ? parseFloat(trans[0].split("(")[1]) : 0), y: (trans[1] ?         parseFloat(trans[1].split(")")[0] ): 0) };
}

//position the elements based on the one before it
function positionElements() {
    txts.filter(function(d,i){return i != 0}) //filter out the first element
        .attr("transform",function(d,i){
            var prev = d3.select(txts[0][i]), //use i b/c the list shifts on filter
            prevWidth = parseFloat(prev.node().getBoundingClientRect().width)
            prevCoords = transformCoordOf(prev);

            var cur = d3.select(this),
            curWidth = parseFloat(cur.node().getBoundingClientRect().width)
            curCoords = transformCoordOf(cur);

            var y = prevCoords.y,
                x = prevCoords.x + prevWidth + 10;

            return "translate("+x+","+y+")";
        })
}

var names = ["apples","oranges","bananas"]
var canvas = d3.select("#content")
    .append("svg")
    .attr("width","600px")
    .attr("height","100px");

var txts = canvas.selectAll("text").data(names)
    .enter()
    .append("text")
    .attr("transform","translate(10,50)")
    .text(function(d){return d});

positionElements()

d3.select("button").on("click",function(){positionElements()})
4

2 に答える 2

1

<text>参照しているフォントは、最初に要素をレンダリングして幅を測定した時点ではダウンロードされていません。したがって、この時点では、参照されたフォントがロードされた後に幅が狭くなります。

ブラウザーのロード イベントを待つことは ( Robert が示唆しているように) 試す価値はありますが、それがすべてのブラウザーで機能するかどうかはわかりません。CSS宣言だけでなく、最初の使用法に遭遇するまで、一部のブラウザーが実際にはリモートの @font-face フォントをロードしないことを示唆する以前の記事を読みました。しかし、私はこれを経験したことがないので、肯定的ではありません。

@font-face とダウンロードのタイミングに関するリンクが満載の、関連する SO の質問があります。

于 2013-09-19T05:18:54.963 に答える