问题描述
我正在使用 d3.v2.js 绘制饼图,并使用一个拨盘(位于中间)指向饼图的选定组件.拨号代码如下
i'm using d3.v2.js to render pie chart and a dial (in center) to point to the selected component of the pie. The code for dial is as below
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 + ")");
}
我在初始渲染和updateDialIndicator()上调用createDialIndicator()以将刻度盘更改为指向我单击的组件.问题是:d3旋转时在createDialIndicator()中引发以下错误,但在updateDialIndicator()中未引发以下错误.我可以知道会有什么问题吗?
I'm calling createDialIndicator() on initial render and updateDialIndicator() to change the dial to point to the component I click.The issue is:d3 is throwing following error in createDialIndicator() on rotate but not in updateDialIndicator(). May I know what would be the issue?
推荐答案
问题是没有设置初始的transform
属性来用作过渡的开始.这就是错误消息的含义.要解决此问题,只需添加一个初始轮播:
The problem is that there's no initial transform
attribute set to use as a start for the transition. This is what the error message means. To fix, simply add an initial rotation:
d3.selectAll(".dialGroup")
.attr("transform", "rotate(0)")
.transition()
.duration(1000)
.attr("transform", "rotate(" + dialAngle + ")");
这篇关于d3.js抛出错误:< g>的值无效属性transform ="null".在transition()上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!