Javascript 角D3函数
我试图理解如何在D3中使用函数attrTween。 我正在尝试实现以下示例中的饼图: 然而,当我进入过渡阶段时,我遇到了一些问题Javascript 角D3函数,javascript,angular,typescript,d3.js,Javascript,Angular,Typescript,D3.js,我试图理解如何在D3中使用函数attrTween。 我正在尝试实现以下示例中的饼图: 然而,当我进入过渡阶段时,我遇到了一些问题 private populateGauge(): void { const innerRadius = this.radius - 50; const outerRadius = this.radius - 10; const arc = d3 .arc() .innerRadius(innerRadius)
private populateGauge(): void {
const innerRadius = this.radius - 50;
const outerRadius = this.radius - 10;
const arc = d3
.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
.startAngle(0);
const background = this.svg
.append('path')
.datum({ endAngle: this.tau })
.style('fill', '#ddd')
.attr('d', arc);
this.myEndAngle = { endAngle: (this.gaugeData.value / 100) * this.tau };
const foreground = this.svg
.append('path')
.datum(this.myEndAngle)
.style('fill', 'orange')
.attr('d', arc);
foreground
.transition()
.duration(1500)
.attrTween('d', function(newAngle) {
return function(d) {
const interpolate = d3.interpolate(d.endAngle, newAngle);
return function(t) {
d.endAngle = interpolate(t);
return arc(d);
};
};
});
}
我一直在尝试使用简单的基本情况,只是在插值函数中使用0,但我无法消除最后一个返回语句抛出的最终错误(返回弧(d))
类型为“number”的参数不能分配给类型为的参数
“DefaultArcObject”
我该如何面对这些问题?
如果您需要提供更多信息,请告诉我。attrTween('d',…)
使用一个函数返回另一个函数。您向它传递一个函数,该函数以当前数据、索引和当前节点作为参数进行调用。此函数应返回使用时间值调用的插值函数
当我看你的源代码时。您有3个嵌套函数,这是不正确的
您需要将起点和终点角度作为基准的值,并且不应该从tween函数内部修改基准
我更喜欢在tween函数之外创建一个圆弧函数,然后将其用于插值。这是更有效的,因为你不是每次都创建一个新的弧函数
const myArc = d3.arc();
// ^^^ call methods of arc() to configure settings that won't animate.
foreground
.transition()
.duration(1500)
.attrTween('d', (d) => {
return (t) => {
const angle = d3.interpolate(d.endAngle, d.newAngle)(t);
// ^^^ interpolate datum values using time.
myArc.startAngle(angle);
// ^^^ call methods of arc() to configure what you need.
return myArc(null);
// ^^^ call arc function to render "d" attribute.
};
};
});
我发现使用节点包“@types/d3”更容易
然后可以将这些类型导入到TypeScript文件中
import * as d3 from 'd3';
如果你有一个像WebStorm这样的IDE。您可以按住CTRL键并单击D3函数,然后查看类型定义和注释。我认为这运行正常。你只是想让TypeScript警告静音?使用D3和TypeScript正确地获取类型可能是一件痛苦的事情。在VS代码中(它看起来像OP正在使用的代码),您可以通过单击F12查看类型定义-转到定义谢谢您的回复。它运行,但恐怕没有动画效果。。我整天都在做这个功能。这是我在你的帖子后修改它的方式:这不会导致任何实际的运行时错误,但也不会显示转换。
import * as d3 from 'd3';