javascript - D3 : Setting selection transform attribute in a nicer way

Question

我使用 d3 一段时间了，但每次我想对 d3 选择应用翻译时，我都会这样做:

 var svg = d3
        .select("svg")
        .attr("transform", "translate(0,$1)".replace("$1", "" + (someHeight)))

注意:someHeight通常是一个计算，否则我会使用字符串连接，我只是觉得这样读起来更好。

我一直在尝试寻找是否有更好的方法来设置转换，也许可以通过 attr 之外的另一个 API

如果问题需要更好的解释，请告诉我。

亲切的问候。

Answer 1

您可以使用d3.transform function解析此属性并以更好的方式操作它:

var t = d3.select("svg").attr("transform");
t.translate[1] = someHeight;
d3.select("svg").attr("transform", t.toString);

您当然也可以使用纯Javascript来设置属性:

d3.select("svg").each(function() { this.setAttribute("transform", ...); });

但这并没有更好。我想调用一个四个字母的函数至少是最简洁的。