Question

我使用d3.js的树形布局来表示我的图表。链环为eblow型矩形，圆角。路径属性就像打击

 <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">

路径旅行源到目标。目标是动态的和可移动的，所以当我尝试移动目标时，它在源d3上的同一y轴上拖动错误

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"

经过一段距离的工作。我总是设置弧形无线电3但是为什么它在更新时需要一些浮动值。

计算路径的部分代码

arc函数将返回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;
            }

并且计算出的路径函数将创建路径

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

arc命令的格式为"[A|a]rx,ry, x-axis-rotation, large-arc-flag, sweep-flag, x,y"（more info on path arcs）。 large-arc-flag和sweep-flag都表示布尔值，必须为0或1。

解析错误是因为您从逆时针扫描（弧命令的第五个数字是0）切换到顺时针扫描（第五个数字是1）。基于字符串的属性的默认d3转换（如路径的"d"属性）计算字符串中每个数字的中间值。但是中间值在这种情况下无效，导致错误。

所以你有两个选择：要么摆脱过渡，要么创建一个自定义补间函数，用正确的语法计算每个位置的路径。

D3js更新路径解析错误将破坏while的路径

1 个答案: