Question

我在D3js中有一个带有图例的多线图表。我面临的两个问题

图例文字的长度不同所以如果我为图例矩形和文本提供固定的x，有时它会与另一个图例重叠。

当说20个图例横向出现时它不会进入下一行。它会溢出svg。我希望它自动进入下一行。

var color = that.getColor(series);
    legend = svg.selectAll(".legend").data(series.slice().reverse()).enter().append("g").attr("class", "legend").attr('transform', 'translate(-20,'+(height+50)+')');
    legend.append("rect").attr("x", function(d,i){return (i*105);}).attr("y", "0").attr("width", 12).attr("height", 12).style("fill", color);
    legend.append("text").attr("x", function (d, i) {return (i*105+15);}).attr("y", "11").text(function (d) {return d;});

fiddle

Answer 1

主要逻辑是计算图例组的翻译。我研究了标签的长度，如果超出宽度，我会添加一个y translate。像这样的东西：

   .attr("transform", function (d, i) {
        var y = line *50;
        var x = col;
        col += d.name.length*13+ 10;
        if (col > width){
            //width is exceeded add new line
            x = 0;
            col =d.name.length*13+ 10;
            line++;
            y = line *50;
        }

完整代码在这里： http://jsfiddle.net/cyril123/jojjz2pf/8/

横向传奇正在走出svg

1 个答案: