我正在使用 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() 中没有。我可以知道会是什么问题吗?
Error: Invalid value for attribute transform="null"
最佳答案
问题在于没有设置初始的 transform
属性作为过渡的开始。这就是错误消息的含义。要修复,只需添加一个初始旋转:
d3.selectAll(".dialGroup")
.attr("transform", "rotate(0)")
.transition()
.duration(1000)
.attr("transform", "rotate(" + dialAngle + ")");
关于d3.js 抛出错误 : Invalid value for <g> attribute transform ="null" on transition(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23870388/