如何将图例项的宽度设置为最大计算文本长度?

时间:2018-09-26 06:54:10

标签: javascript d3.js

我试图使用getComputedTextLength()替换itemWidth,但无济于事。

这是我的代码:

var itemWidth = 80;
var itemHeight = 5;
legendData = getLeafNodes([data]);


var legend =    d3.select(".legend")
                .append('svg')
                .attr("id", "legend")
                .append('g')
                .attr('legend', true)
var itemEnter = legend.selectAll('g.legendItem')
                .data(legendData)
                .enter()
                .append('g')
                .attr('class', function (d) {
                    return 'legendItem ' + safe_name(d.name);
                })



            itemEnter.append('rect')
                .attr('x', 0)
                .attr('y', 0)
                .attr('width', '10')
                .attr('height', '10')
                .style('fill', function (d) { return color(d.name); })
                .attr('transform', 'translate(10,6)')
                .attr('id', function (d) {
                    return 'legendRect ' + safe_name(d.name);
                })

            itemEnter.append('text')
                .attr('x', 0)
                .attr('y', 0)
                .attr('class', 'legendText')
                .text(function (d) { return d.name })
                .attr('transform', 'translate(25, 15)')

          itemEnter.attr("transform", function (d, i) { return "translate(" + i % 8 * itemWidth + "," + Math.floor(i / 8) * itemHeight + ")"; })

样本数据:https://api.myjson.com/bins/1bki3o

我知道,玻璃纸胶带不是一个国家,只是假装要测试文本长度。

输出:enter image description here

0 个答案:

没有答案