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

我正试着用它

以下是迄今为止的一系列工作

下面的图片是我想要实现的（只是布局、内容/颜色无关紧要）

我在附加到文本/矩形的类上尝试了标准的

float:left

+

display:inline

，但它对我不起作用。也许我犯了个错误。我不确定是应该在d3脚本中还是在css文件中执行此操作

希望这是一个简单的修复-任何帮助都非常感谢

谢谢这些属性（

float:left+display:inline

）只对html元素起作用，这里的图例库生成的是svg

这是可能的，但需要一点工作

这首先将每个图例“单元格”的文本元素移动到色样的右侧，而不是下方

然后，它使用

.getComputedTextLength（）

和偏移的运行总数，根据标签的宽度（以及样本和声明的填充）水平移动保持标签和样本的g元素

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