Angular D3 понимает функцию attrTween
Я пытаюсь понять, как использовать функцию attrTween в D3. Я пытаюсь реализовать круговую диаграмму из следующего примера: 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 arc (d));
Argument of type 'number' is not assignable to parameter of type 'DefaultArcObject'.
Как мне обойти эти проблемы? Дайте мне знать, если вам нужна дополнительная информация.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
attrTween('d',...) принимает одну функцию, которая возвращает другую функцию. Вы передаете ему функцию, которая вызывается с текущими датум, показатель и текущими узел в качестве параметров. Эта функция должна возвращать функцию интерполяции, которая вызывается со значением время.
Когда я смотрю на ваш исходный код. У вас есть 3 вложенные функции, и это неправильно.
Вам необходимо иметь углы Начало и конец в качестве значений датум, и не следует использовать мутировать для датум внутри функции твина.
Я предпочитаю создавать функцию дуга вне функции подросток, а затем использовать ее для интерполяции. Что более эффективно, поскольку вы не создаете новую функцию дуга каждый раз.
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';
Если у вас есть IDE, такая как WebStorm. Вы можете нажать CTRL+CLICK на функции D3 и просмотреть определения типов и комментарии.
И в VS Code (который, похоже, использует OP) вы можете увидеть определения типов, нажав F12 - Перейти к определению
Спасибо за ваш ответ. Запускается, но боюсь не с анимационным эффектом.. Целый день просидел с этой функцией. Вот как я изменил его после вашего сообщения: i.gyazo.com/9dc8dd33013dcbc6df71be327d10c195.png Это не вызывает никаких реальных ошибок времени выполнения, но также не показывает переход.
Я предполагаю, что это работает нормально. Вы просто хотите отключить предупреждение TypeScript? Правильное определение типов с помощью D3 и TypeScript может быть проблемой.