如何将多个D3转换命令拆分为单独的语句 [英] How to split multiple D3 transform commands into separate statements

问题描述

我的缩放遇到了一些麻烦.我发现此缩放具有 2倍翻译和 1倍缩放:

I have some trouble with my zooming. I found this zooming with 2x translate and 1x zoom:

g.transition()
      .duration(750)
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")");

这正在工作.但是我想通过使用 zoom命令来保存缩放状态，例如因此，我通过以下方式进行了尝试:

This is working. But I want to save the zooming state by using zoom commands e.g. So I tried it in the following way:

zoom.translate([width / 2, height / 2]);
zoom.scale(k);
zoom.translate([-x, -y]);
g.transition()
      .duration(750)
      .attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")");

但是以这种方式，zoom.translate([width / 2, height / 2]);被完全忽略了，因为我已经覆盖了它.

But in this way zoom.translate([width / 2, height / 2]); is completely ignored because I've overwritten it.

但是如何使用缩放命令解决我的问题?

But how can I use the zoom commands to solve my issue?

如何将两个转换语句都写成一个.这有可能吗?

How can I write the both translate statements as one. Is this possible somehow?

一些有用的链接:

• https://www.dashingd3js.com/svg-group-element -and-d3js
• 在D3中堆叠转换
• http ://grokbase.com/t/gg/d3-js/1348aqq9bm/d3-transform-an-extension-for-the-transform-attribute

• https://www.dashingd3js.com/svg-group-element-and-d3js
• stacking transforms in D3
• http://grokbase.com/t/gg/d3-js/1348aqq9bm/d3-transform-an-extension-for-the-transform-attribute

推荐答案

我通过以下解决方法-非常令人毛骨悚然的解决方案.它运行良好，但对我来说，它看起来很丑陋，它基于将转换保存在特殊变量中的方式:

I solved it with the following - very creepy - solution. It's working well but for me it looks very ugly and is based on saving the transformation in a special variable:

var currentzoomy = d3.transform("translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
zoom.scale(currentzoomy.scale[0]);
zoom.translate(currentzoomy.translate);

这是一个好的解决方案吗?也许有人现在有了一个更好的主意，我的问题是什么. =)

Is that an OK solution? And maybe someone now has a better idea what my issue was about. =)

这篇关于如何将多个D3转换命令拆分为单独的语句的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！