D3.js attrTween 返回 null(意外行为)
D3.js attrTween Returning Null (Unexpected Behavior)
我有一个非常基本的D3 SVG,它基本上由几个弧组成。
无论我使用什么(attr、attrTween 和调用),我似乎都无法通过回调的第一个参数获取数据——它总是返回 null(我认为这是某种解析错误,即使路径正确呈现?
我可能会忽略一些基本的东西,因为我对图书馆相对较新......
var el = $('#graph'),
width = 280,
height = 280,
twoPi = Math.PI * 2,
total = 0;
var arc = d3.svg.arc()
.startAngle(0)
.innerRadius(110)
.outerRadius(130),
svg = d3.select('#graph').append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"),
meter = svg.append('g').attr('class', 'progress');
/* Add Meter Background */
meter.append('path')
.attr('class', 'background')
.attr('d', arc.endAngle(twoPi))
.attr('transform', 'rotate(180)');
/* Add in Icon */
meter.append('text')
.attr('text-anchor', 'middle')
.attr('class', 'fa fa-user')
.attr('y',30)
.text('')
/* Create Meter Progress */
var percentage = 0.4,
foreground = meter.append('path').attr('class', 'foreground')
.attr('transform', 'rotate(180)')
.attr('d', arc.endAngle(twoPi*percentage)),
setAngle = function(transition, newAngle) {
transition.attrTween('d', function(d,v,i) {
console.log(d,v,i)
});
/*transition.attrTween('d', function(d) { console.log(this)
var interpolate = d3.interpolate(d.endAngle, newAngle);
return function(t) { d.endAngle = interpolate(t); return arc(d); };
});*/
};
setTimeout(function() {
percentage = 0.8;
foreground.transition().call(setAngle, percentage*twoPi);
},2000);
正是这个代码块似乎有问题:
transition.attrTween('d', function(d,v,i) {
console.log(d,v,i)
});
返回:
undefined 0 "M7.959941299845452e-15,-130A130,130 0 0,1 76.4120827980215,105.17220926874317L64.65637775217205,88.99186938124421A110,110 0 0,0 6.735334946023075e-15,-110Z"
我尝试使用插值器将 i 值解析为字符串,因为我似乎无法获取"d",但是这有一个解析错误,返回具有多个 NaN 的 d 属性。
这一切看起来很奇怪,因为它是从弧线计算出的简单路径???
D3 中基本上所有回调的第一个参数(此处d
)是绑定到您正在操作的 DOM 元素的数据元素。在您的情况下,没有数据绑定到任何内容,因此d
未定义。
我在这里更新了您的 jsfiddle 以动画过渡并更像饼图示例。要显示的百分比绑定到路径作为基准面。然后,您需要做的就是绑定新数据并以与任何饼图示例相同的方式创建补间:
meter.select("path.foreground").datum(percentage)
.transition().delay(2000).duration(750)
.attrTween('d', function(d) {
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
return arc.endAngle(twoPi*interpolate(t))();
};
});
相关文章:
- 数组在递归方法中设置为null
- 分析高度属性时出现意外值{{specs.height}}.index.html
- 铬:“;未捕获的语法错误:意外的标记:"
- Javascript未捕获语法错误意外的标识符错误
- 字符串在将其传递给另一个活动Android JavaScript时读取Null
- 无法获取属性'selectedIndex'的未定义引用或null引用
- Meteor方法在客户端返回null,在客户端运行的相同方法返回正确的值
- 来自文本输入null的html javascript变量
- delete在Object上效率低下,但在DOM Element's的数据属性,与null out相比
- 未捕获的语法错误:意外的标记{
- php代码在textbox更改事件上显示null
- "未捕获的语法错误:意外的标记}"
- JSON分析错误:Java中AJAX、Javascript和Servlet的意外EOF
- 相同的RegExp返回不同的结果-第一次是正确的结果,第二次是null
- 在php中提交数据时,如果某些值为null,而某些值为非null,如何进行查询
- 未捕获的类型错误:无法读取属性'addEventListener'的null chrome扩展名
- Node.js使用Series函数(模式?)实现流控制时出现意外结果
- 未捕获的SyntaxError:具有服务器变量的意外标识符
- D3.js attrTween 返回 null(意外行为)
- Webview:无法读取property 'style'null +意外标识符