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

希望这有帮助。