d3.js 抛出错误：transition() 上 <g> 属性 transform="null" 的值无效

Question

我正在使用 d3.v2.js 来呈现饼图和一个刻度盘（在中心）以指向饼图的选定组件。拨号代码如下

function createDialIndicator(dialerData, subComponentId, subComponentsCount, group){
    var offsetAngle = (360/subComponentsCount)/2;
    var dialAngle = ((360/subComponentsCount)*(parseInt(subComponentId.charAt(subComponentId.length-1))))-offsetAngle;
    var dialGroup = group.append("g")
     .attr("class","dialGroup");
    dialGroup.append("path")
     .attr("class","dial")
     .attr("d",dialerData)
     .attr("fill","gold");
    d3.selectAll(".dialGroup")
     .transition()
     .duration(1000)        
     .attr("transform", "rotate(" + dialAngle + ")");
}
function updateDialIndicator(subComponentId, subComponentsCount){
    var offsetAngle = (360/subComponentsCount)/2;
    var dialAngle = ((360/subComponentsCount)*(parseInt(subComponentId.charAt(subComponentId.length-1))))-offsetAngle;
    d3.selectAll(".dialGroup")
     .transition()
     .duration(1000)
     .attr("transform", "rotate(" + dialAngle + ")");
}

我在初始渲染时调用 createDialIndicator() 并调用 updateDialIndicator() 以将表盘更改为指向我单击的组件。 问题是： d3 在旋转时在 createDialIndicator() 中抛出以下错误，但在 updateDialIndicator() 中没有。我可以知道会是什么问题吗？

错误：属性 transform="null" 的值无效

Answer 1

问题在于没有设置初始的transform 属性作为过渡的开始。这就是错误消息的含义。要修复，只需添加一个初始旋转：

d3.selectAll(".dialGroup")
 .attr("transform", "rotate(0)")
 .transition()
 .duration(1000)        
 .attr("transform", "rotate(" + dialAngle + ")");