修改转换属性时,d3.js v4添加了转换矩阵样式,从而防止了缩放

时间:2018-09-20 17:50:31

标签: d3.js

我正在使用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);

0 个答案:

没有答案