Javascript D3：更好地设置选择变换属性

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

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

注意：

someHeight

通常是一个计算，或者我会使用字符串连接，我只是觉得这样读起来更好

我一直在寻找是否有更好的方法来设置转换，可能是通过

attr

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

问候。

您可以使用解析此属性并以更好的方式操作它：

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", ...); });

---

但这并不好。我猜调用一个四个字母的函数至少是最简洁的。

我猜折衷的解决方案就是为每个转换函数编写一个简单的util，在这种情况下

var translateXY = function(x,y) {
  return "translate(" + x + "," + y + ")"
}

然后在需要时随时使用：

d3.attr("transform", translate(x,y))

---

谢谢你的回答。

我投了更高的票，因为这是一个更好的解决方案，没有那么严格，但仍然非常冗长，第二个对我来说没有多大意义。检查来自bostock的“官方”示例，他使用了相同的字符串concat:。谢谢你@LarsKotthoff