- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我想了解如何在 D3 中使用函数 attrTween。我正在尝试根据以下示例实现饼图:http://bl.ocks.org/mbostock/5100636 .
但是当我到达过渡部分时遇到了问题。
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,但我无法摆脱最后一个 return 语句抛出的最终错误 (return arc(d));
Argument of type 'number' is not assignable to parameter of type 'DefaultArcObject'.
我如何解决这些问题?如果您需要提供更多信息,请告诉我。
最佳答案
attrTween('d',...)
采用返回另一个函数的单个函数。您将一个函数传递给它,该函数以当前数据、索引 和当前节点 作为参数调用。此函数应返回以时间 值调用的插值函数。
当我查看您的源代码时。您有 3 个嵌套函数,这是不正确的。
您需要将开始 和结束 Angular 作为基准 的值,并且不应改变补间函数中的数据。
我更喜欢在 tween 函数之外创建一个 arc 函数,然后将其用于我的插值。这更有效,因为您不是每次都创建一个新的 arc 函数。
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”更容易
npm install @types/d3 --save-dev
然后您可以将这些类型导入到 TypeScript 文件中
import * as d3 from 'd3';
如果你有像 WebStorm 这样的 IDE。您可以在 D3 函数上按 CTRL+CLICK 并查看类型定义和注释。
关于javascript - Angular D3 理解 attrTween 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54852791/
我正在基于示例 here 在 d3 v3 中创建旭日形.我无法理解为什么 attrTween() 在以下情况下不起作用。 path.transition() .duration(750) .a
我正致力于通过 d3.svg.arc 函数创建“带”。我知道 .transition()没有很好的默认弧插值器,所以我使用 attrTween 定义了自己的插值器.这是我的代码的相关部分: var b
我试图模仿 Mike Bostock 的例子 Extending Arcs .我的代码与 Mike 的非常相似,但我的代码与他的不同。 下面是 JavaScript 代码: E
我正在尝试创建动画弧形图。我已经能够创建我想要的动画类型,但我想添加延迟。 我使用 .attrTween 方法创建动画。 这是我的延迟尝试代码的主要部分: svg.selectAll(".arcs")
This Mike Bostock 的例子对我很有用。它显示了一个点沿着曲线闭合路径无限流动。代码非常简单,除了最后几行我不明白。我在下面写下相关代码: transition(); function
我正在尝试理解 attrTween。我知道进行此方形移动的简单方法就是使用 attr,但该示例的目的是让我了解 attrTween。下面的例子没有做任何事情,但是控制台也没有出现js错误,所以我不确定
我正在尝试在 d3 上创建一个接口(interface)。我找到了圆弧动画代码(http://bl.ocks.org/mbostock/5100636),我想稍微改变一下(没有函数 arcTween(
我想了解如何在 D3 中使用函数 attrTween。我正在尝试根据以下示例实现饼图:http://bl.ocks.org/mbostock/5100636 . 但是当我到达过渡部分时遇到了问题。
我有一个关于 attrTween 的问题(有时是 tween())。 我将自定义补间函数理解为 在“attrTween('d' ”参数之后,我定义了自定义函数。因此,我编写了如下自定义函数。
我正在尝试将以下圆环图从 d3.js v3 升级到 d3.js v4。 http://bl.ocks.org/dbuezas/9306799 我已经用新版本中的等效方法替换了所有旧版本的方法名称。 d
我是一名优秀的程序员,十分优秀!