我正在尝试使用 Susie Lu's legend plugin .
这是目前为止的一些工作;
http://plnkr.co/edit/wrOWPYu4PAqwr8f5OOjw?p=preview
下图是我想要实现的(只是布局,内容/颜色无关紧要)
我已经在附加到文本/矩形的类上尝试了标准的 float:left
+ display: inline
但它对我不起作用。也许我犯了一个错误。我不确定是否应该在 d3 脚本或 css 文件中执行此操作?
希望这是一个简单的修复 - 非常感谢任何帮助!
谢谢
最佳答案
那些属性(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;
});
这首先将每个图例“单元格”的文本元素移动到色样的右侧而不是下方。
然后它使用 .getComputedTextLength()
移动保持标签和样本的 g 元素水平分开,具体取决于标签的宽度(以及样本和声明的填充)和运行总计偏移量。
关于javascript - 将 svg 文本与 d3.js 图例对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38073217/