Error while updating symbol from triangle to Circle

[Clindo Devassy]

Hi,

I was trying to plot symbols. In my chart when zooming the triangles should be changed as circles. There is an unwanted delay in plotting the circle which replaces the triangle. Also I am getting this error:

Error: <path> attribute d: Expected arc flag ('0' or '1'), "…990441565721838,9.80943606357575…".

After searching for some time I saw attrTween() function but with that I found only interpolation. I could not change the symbol from triangle to Circle.

The code snippet which handles the logic is :

var itemCirlces = focus.append("svg").append("g");

var shapes = itemCirlces.selectAll(".item")
    .data(visItem, (d, i)=> {
        return d.id;

    });


shapes.transition().duration(function (d) {

    return d.dur;
    //  return 0;
}).on("start", function repeat() {
    d3.active(this).attr("transform", function (d) {
        return "translate(" + d.cx + "," + d.cy + ")";
    }).attr("id", function (d) {
        return d.id;
    })
    // .attr("class", "item")
        .attr("d", d3.symbol()
            .size(function (d) {
                console.log(d.shape);
                if (d.shape === "circle") {
                    return 300;
                }
                else {
                    return 500;
                }
            })
            .type(function (d) {

                if (d.shape === "circle") {
                    return d3.symbolCircle;
                }
                else {

                    return d3.symbolTriangle;
                }
            })).style("fill", function (d) {
        return d.clr;
    }).transition();
});


shapes.exit().remove();

Kindly provide your suggestion.

Thanks,

Clindo

[Clindo Devassy]

The Problem is solved. The error was because of the transition. Instead of changing the path with transition I changed it as follows:

var itemCirlces = focus.append("svg").append("g");

var shapes = itemCirlces.selectAll(".item")
    .data(visItem, (d, i)=> {
        return d.id;

    });

shapes.attr("d", d3.symbol()
    .size(function (d) {
       // console.log(d.shape);

        if (d.shape === "circle") {
            return 300;
        }
        else {
            return 500;
        }
    })
    .type(function (d) {

        if (d.shape === "circle") {
            return d3.symbolCircle;
        }
        else {

            return d3.symbolTriangle;
        }

    }));

shapes.transition().duration(function (d) {

    return d.dur;
    //  return 0;
}).on("start", function repeat() {
    d3.active(this).attr("transform", function (d) {
        return "translate(" + d.cx + "," + d.cy + ")";

    }).style("fill", function (d) {
        return d.clr;
    }).transition();
});

shapes.exit().remove();

Now it works without path error :)

Regards,

Clindo