javascript - D3 过渡：旋转和平移

Question

我是 d3 的新手，到目前为止我很喜欢它，但我试图把一些东西放在一起，但不知道如何纠正某些行为。

这是我正在尝试做的演示：

[已删除] 死链接

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

第二个行为是旋转之间的过渡“反弹”。这是因为它不是围绕 (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)");
    }