d3.js变换和翻译函数的解释

Question

有人可以解释一下转换和翻译在做什么:

d3.transform(d3.select(tick[0]).attr('transform')).translate[1];

上面的勾选来自xaxis,其值可能是translate(0,280).

所以我可以看到我正在挑选翻译函数的第二个值,但为什么我需要将所有这些包装起来d3.transform呢？

Answer 1

d3.transform是一个辅助函数.由于有许多可用的转换,例如.translate,rotate,scale和所有它的价值变值相同领域内也难以提取单个的转变.

<circle cx="10" cy="20" r="15" transform="translate(0,100)scale(2, 2)rotate(180)"></circle>

但是如果用d3.transform随后的选择对象转换属性,则可以使用d3.transform()函数方法访问各个组件.

例如.

var c = d3.select('circle');

var tx = d3.transform(c.attr('transform')).translate 

var scale = d3.transform(c.attr('transform')).scale

var rotate = d3.transform(c.attr('transform')).rotate

希望这是有帮助的.