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)"); 
    }