如何使用d3.js创建水平图例

Question

我一直在尝试使用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;
    }
}

有没有人对如何改进这个有任何建议？

Answer 1

我建议引用这个问题:SVG获取文本元素宽度

按原样渲染第一个图例条目.存储此条目,或指定ID,以便您可以通过选择查找它们.

渲染后续条目时,获取前一个'text'元素和x offset.使用前一个文本元素的精确宽度计算新的图例条目偏移量

var myNewXOffset = myPreviousXOffset + myPreviousText.getBBox().width