Ответ 1
Это потому, что вы используете d3 version4. В API v4 произошли серьезные изменения, поэтому:
Вместо использования
// ...
.each("end", pulsate);//in d3 version 3
do
// ...
.on("end", pulsate);//in d3 version 4
D3 переключение циклов перебора Uncaught TypeError: t.call не является функцией
Очень новый для D3 и относительно новый для JS в целом. Я пытаюсь создать круг по щелчку, и этот круг, когда-то созданный, должен постоянно пульсировать навсегда. Прямо сейчас, он создается правильно, и он делает переход один раз, но потом он вроде бы умирает из-за ошибки. Вот мой код:
var shapesAtt = shapes
// omitted: assigning fill, position, etc; working as intended
.on("click", circleMouseClick);
function circleMouseClick(d, i)
{
createPulse(this);
}
function createPulse(focusElement)
{
// takes in "focal circle" element
// some things here are hard coded for ease of reading
// (i.e. these variables aren't all useless)
var focus = d3.select(focusElement);
var origR = focus.attr("r");
var origX = focus.attr("cx");
var origY = focus.attr("cy");
var origFill = focus.style("fill");
var strokeColor = "black";
var newG = svgContainer.append("g");
var pulser = newG.append("circle").attr("id", "pulser")
.style("fill", "none").style("stroke", strokeColor)
.attr("cx", 150).attr("cy", 150)
.attr("r", origR)
.transition()
.duration(2000)
.each(pulsate);
}
function pulsate()
{
var pulser = d3.select(this);
pulser = pulser
.transition().duration(2000)
.attr("r", 25)
.attr("stroke-width", 50)
.transition().duration(2000)
.attr("r", 90)
.attr("stroke-width", 10)
.each("end", pulsate);
}
Ошибка, которую я получаю при запуске в Chrome:
Uncaught TypeError: t.call is not a function d3.v4.min.js:4
Часть моего кода, с которой я думаю, имеет значение:
function pulsate()
{
// ...
.each("end", pulsate);
}