5

d3.js を使用してグラフの水平凡例を作成しようとしています。動的ラベルで x 軸の間隔を正しくするのに苦労しました。

問題は、ラベルの幅が一定でないことです。ここに完全な例を示します。これは、x 位置を計算する関数です。

function legendXPosition(data, position, avgFontWidth){
    if(position == 0){
        return 0;
    } else {
        var xPostiion = 0;
        for(i = 0; i < position; i++){
            xPostiion += (data[i].length * avgFontWidth);
        }
        return xPostiion;
    }
}

これを改善する方法について何か提案はありますか？

4

2 に答える 2

7

この質問を参照することをお勧めします: SVG get text element width

最初の凡例エントリをそのままレンダリングします。このエントリを保存するか、選択して検索できるように ID を割り当てます。

後続のエントリをレンダリングするときに、前の 'text' 要素と x オフセットを取得します。前のテキスト要素の正確な幅を使用して、新しい凡例エントリのオフセットを計算します

var myNewXOffset = myPreviousXOffset + myPreviousText.getBBox().width
于 2012-12-19T15:33:52.897 に答える