将svg文本与d3.js图例内联对齐

Question

我试图使用Susie Lu's legend plugin。

到目前为止，这是一项工作;

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;
   });

首先移动每个图例的文本元素＆＃39; cell＆＃39;在色样的右侧而不是下方。

然后使用.getComputedTextLength()和偏移量的运行总计，将标签和样本水平分开的g元素移动，具体取决于标签（以及样本和声明的填充）的宽度。