D3js Updating path parse error will breaking path for while

Question

I had use tree layout of d3.js for representing my chart. And the links are eblow type rectangular shape with rounded corner. the path attributes is like blow

 <path class="link" style="stroke: rgb(0, 0, 0);" marker-end="url(#arrowhead)" 
  marker-start="url(#markerCircle)" 
  d="M212,155H287.5a 3,3 0 0 1 3,3V197a 3,3 0 0 0 3,3H291.5V200H303"> 

path travel source to target. target are dynamic and movable so when I try to move target drag it at the same y - axis on source d3 trows error

Error: Problem parsing d="M212,155H288.5a 3,3 0 0 0.053023851851851767 3,-2.6818568888888894V145.863288a 3,3 0 0 0.9469761481481482 3,-2.6818568888888894H292.5V143.18143111111112H304" 

Error: Problem parsing d="M212,155H288.5a 3,3 0 0 0.015381185185185497 3,-2.907712888888887V143.83058400000002a 3,3 0 0 0.9846188148148145 3,-2.907712888888887H292.5V140.92287111111114H304"

and after some distance from y working well. I am setting arc radios always 3 but why it's take some float value on updating.

part of code which calculate path

arc function will will return arc

function getArc(_type,r,toDown){
                console.log(_type,r);
                var arc = "a "+r+","+r+" 0 0 0 "+r+","+r+"";
                var type = _type+"";
                switch (type){
                    case "1":
                        if(toDown){
                            arc = "a "+r+","+r+" 0 0 0 "+ ( -1*r ) +","+r+"";
                        }else{
                            arc = "a "+r+","+r+" 0 0 1 "+ r +","+( -1*r )+"";
                        }
                    break;
                    case "2":
                        arc = "a "+r+","+r+" 0 0 0 "+r+","+r+"";
                        break;
                    case "3":
                        arc = "a "+r+","+r+" 0 0 1 "+r+","+r+"";
                        break;
                    case "4":
                        if(toDown){
                            arc = "a "+r+","+r+" 0 0 1 "+ ( -1*r ) +","+r+"";
                        }else{
                            arc = "a "+r+","+r+" 0 0 0 "+ r +","+ ( -1*r)+"";
                        }
                        break;
                    default :
                        arc = "a "+r+","+r+" 0 0 0 "+r+","+r+"";
                }
                return arc;
            }

and the computed path function will create path

function getComputedPath(d){
                var _path = "";
                var x1,x2,y1,y2;
                x1 = d.source.x + d.source.width;
                y1 = d.source.y + (d.source.height/2);
                x2 = d.target.x;
                y2 = d.target.y;
                var _cx = (d.source_resource.x + d.source_resource.width + 15 + (getSidePadding(d.source_resource.id) *0.5)) - 3;
                 _path = "M"+x1+","+y1 + "H"+ _cx ;
                   var a1 = "",
                   a2 = "",
                   sp = 0;
                    if(Math.abs(y1-y2) > 3){
                      if(y1 < y2){
                        a1 = getArc(3,3,true);
                        a2 = getArc(2,3,true);
                        sp = 3;
                      }else{
                        a1 = getArc(4,3,false);
                        a2 = getArc(1,3,false);
                        sp = -3;
                      }
                    }
                    _path += a1 +"V"+ ( y2 - sp );
                    if(_cx > (x2-getSidePadding(d.target.id))){
                      _path += a2 +"H" + (_cx + Math.abs(sp) + 1);
                    }else{
                       _path += a2 +"H" + (x2-getSidePadding(d.target.id) + 4 );
                    }
                     _path += "V"+ y2 +"H"+ x2 ;
 }

Answer 1

The format for an arc command is "[A|a]rx,ry, x-axis-rotation, large-arc-flag, sweep-flag, x,y" (more info on path arcs). Both the large-arc-flag and the sweep-flag represent boolean values, and have to be either 0 or 1.

The parse error is because you're switching from a counterclockwise sweep ( the fifth number of the arc command is 0) to a clockwise sweep (the fifth number is 1). The default d3 transition for a string-based attribute -- like the "d" attribute of a path -- calculates intermediate values for every number in your string. But intermediate values aren't valid in this context, causing the errors.

So you have two choices: either get rid of the transition, or create a custom tween function that calculates your path at each position with correct syntax.