我正在使用d3 v4.13.0,尝试修改视图容器(元素)的缩放。变量this.view
表示该元素。该代码与d3 v3中的代码相同,但是d3.js在v4中添加了一个新的style属性,并更改了transform属性。
这是修改transform属性之前view元素的外观:
<g class="view" data-radium="true"></g>
这是修改属性的代码:
// viewTransform is a {k, x, y} transform object
const view = d3.select(this.view)
.attr("transform", this.state.viewTransform);
上面的代码做一件事,它更改元素上的transform属性。结果是:
<g
class="view"
data-radium="true"
transform="translate(404.3430823298754,16.377242185754085) scale(0.7710853699920492)"
style="transform: matrix(1, 0, 0, 1, 0, 0);"></g>
问题在于样式属性覆盖了转换。如何让d3停止添加样式属性?
当然,使用d3的另一种方法是简单地使用Vanilla JS,选择view元素,然后手动修改transform属性,但是我想继续使用d3。也许这在v5中已解决?
编辑:看起来像添加了transform属性的任何事物还可以导致创建矩阵样式。我直接使用Javascript(const elem = d3.select(this.view).node().setAttribute('transform', ...)
)修改了元素,样式仍然显示出来。我必须取消设置缩放样式才能使缩放功能再次起作用(elem.style.transform = null
);