D3过渡：旋转和翻译

Question

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

以下是我正在尝试做的演示：

[已删除] deadlink

第一种行为是每个仪表的“起始”点始终默认为黑色，颜色从那里过渡。

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

有人可以帮我看看我哪里出错吗？

感谢。

Answer 1

这两种行为都是您在每次重绘时重置当前仪表状态的结果。尝试取出界限：

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

变换将仪表返回到原点，填充将其恢复为黑色。

Answer 2

此功能将修复反弹。我需要一个插值函数来消除弹跳。 a是先前的职位。

pointer.transition()
        .style("fill", this.valueToColor(value))
        .duration(1000)
        .ease("bounce")
        .attrTween("transform", tween);

    function tween(d, i, a) {
      return d3.interpolateString(a, "rotate(" + rotateAngle + ", 150, 150)");
    }