Выровнять текст svg inline с легендой d3.js

Question

Я пытаюсь использовать Susie Lu's legend plugin.

Это plnk работы до сих пор;

http://plnkr.co/edit/wrOWPYu4PAqwr8f5OOjw?p=preview

Изображение ниже, что я хотел бы достичь (только оформление, содержание/цвет не имеет значения)

Я попробовал стандартный float:left + display: inline на классы, прикрепленные к тексту/прямоугольникам, но это не сработало для меня. Возможно, я ошибся. Я не уверен. Если я вообще буду делать это внутри сценария d3 или в файле css?

Надеюсь, это простое исправление - любая помощь очень ценится!

Благодаря

Answer 1

Эти атрибуты (float:left + display: inline) работают только на HTML элементы, то, что здесь производит библиотека легенда SVG

Это возможно, но требует немного работы

http://plnkr.co/edit/YRFRWEtMFDmje06Mg5KY?p=preview

var cells= d3.selectAll(".cell"); 
    var cellGap = legendLinear.shapeWidth()+(legendLinear.shapePadding()/4); 

    cells.select("text") 
     .attr ("transform", "translate("+cellGap+" 13)") 
     .style ("text-anchor", "start") 
    ; 

    var offset = 0; 
    cells.each (function(d,i) { 
     var d3sel = d3.select(this); 
     var textWidth = d3sel.select("text").node().getComputedTextLength(); 
     var offsetInc = textWidth + legendLinear.shapeWidth() + legendLinear.shapePadding(); 
     d3sel.attr("transform", "translate("+offset+" 0)"); 
     offset += offsetInc; 
    }); 

Это, во-первых, перемещает текстовый элемент для каждой «ячейки» легенды справа от образца цвета а не ниже.

Затем он перемещает элементы g, которые удерживают метку, и рисуют горизонтально друг от друга в зависимости от ширины ярлыка (и образца и заявленного заполнения) с использованием .getComputedTextLength() и общей суммы для смещения.