d3.js - d3.js transform 和 translate 函数的解释

Question

谁能解释一下 transform 和 translate 在这里做什么:

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

上面的刻度线来自一个 x 轴，它的值可能是 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

希望对您有所帮助。