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

謝謝爲答案。