D3过渡：旋转和翻译 [英] D3 Transition: Rotation and Translation

问题描述

我是全新的d3，我喜欢它到目前为止，但我想把东西在一起，不能弄清楚如何纠正某些行为。

I'm brand new to d3 and I like it so far, but I'm trying to put something together and can't figure out how to correct certain behaviors.

这是我想要做的演示：

[已移除] deadlink

[Removed] deadlink

第一行为是每个测量仪的起始点总是默认回黑色，并且从那里转换颜色。

The first behavior is that the "starting" point for each gauge always defaults back to black and colors transition from there.

第二种行为是旋转之间的 。这是因为它不是旋转（150,150），而是绕着（0,0）旋转，这使得它在过渡中反弹，但我不知道如何解决这个问题。

The second behavior is that the transition between rotations "bounces". This is because it is not rotating around (150,150) but instead rotating around (0,0) which makes it "bounce" in the transition, but I have no clue how to fix this.

有人可以帮我看看我错了吗？

Can someone please help me see where I'm going wrong?

谢谢。

推荐答案

这两种行为都是在每次重绘时重置计量器的当前状态的结果。尝试取出行：

Both behaviors are the result that you are resetting the current state of the gauge on every redraw. Try taking out the lines:

pointer
  .attr("transform", null)
  .style("fill", null);

变换将量规返回原点，填充将其返回黑色。

The transform takes the gauge back to the origin and the fill takes it back to black.

这篇关于D3过渡：旋转和翻译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！