D3：以更好的方式设置选择变换属性

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

但这并不好。我想调用一个四字母函数至少就像它所得到的一样简洁。

Answer 2

我想妥协解决方案就是为每个转换函数编写一个简单的util，对于这种情况

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

然后只需在需要时使用它：

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

感谢您的回答。