3.5.5から4.2.8にアップグレードした後のフローチャートの喪失

Question

3.5.5から4.2.8にアップグレードした後、ステップ（ボックスで表される）を進行させる順方向ラインは消え、前のステップへのラインは残ります。

はラインを復元するために変更する必要がありますか？

これは、フローチャートを作成するコードです。

function VisualizeIt(selectedItem) { 
      // dataset created using error handling if the data doesn't load it will say why in the console 
      // the text file contains all the json for the entire tree 
      d3.json("withdrawal.json", function (error, json) { 
       if (error) { 
        console.log(error); 
       } 
       else //it worked, so continue with the visualization 
       { 

        result = []; //clear the array 
        resultChildren = []; //clear the array 

        // grab the result and the child steps from the data 
        // this fills the above arrays with data 
        find(json, selectedItem); 

        //grab the parent of the selected item to display in the left hand box 
        resultParent = []; //clear the array 
        // this fills the last array with data 
        findParent(json, result[0].parentId); 


        // PARENT step 
        var parentStep = svg.select('.resultParent').selectAll("rect") 
         .data(resultParent, function (d) { return d.id; }); 

        parentStep.enter().append("rect") 
         .attr("x", ParentStepPosition(resultChildren.length)[0]) 
         .attr("y", ParentStepPosition(resultChildren.length)[1]) 
         .attr("width", ParentStepSize(resultChildren.length)) 
         .attr("height", ParentStepSize(resultChildren.length)) 
         .attr("fill", "#003f87") 
         .attr("onclick", "VisualizeIt(" + result[0].parentId + ")"); 

        parentStep.exit().remove(); 

        var parentStepText = svg.select('.resultParent').selectAll("g") 
         .data(resultParent, function (d) { return d.id; }); 

        parentStepText 
         .enter() 
         .append("g") 
         .append(function (d, i) { 

         //console.log("textHeight: " + textHeight + ", lineCount :" + lineCount); 
         textHeight = 0; 
         var svgText = createSVGtext("Step Back" 
                 , ParentStepPosition(resultChildren.length)[0] + (ParentStepSize(resultChildren.length)/2) 
                 , ParentStepPosition(resultChildren.length)[1] + ((ParentStepSize(resultChildren.length))/2) + 4 
                ); 

         //console.log("textHeight: " + textHeight + ", lineCount :" + lineCount); 
         return svgText; 
         }) 
         .attr("font-family", "sans-serif") 
         .attr("font-size", "12px") 
         .attr("fill", "white") 
         .attr("text-anchor", "middle") 
         .attr("onclick", "VisualizeIt(" + result[0].parentId + ")"); 

        ; 
        parentStepText.exit().remove(); 

        //child connectors 
        var parentStepLines = svg.select(".result").selectAll("path") 
            .data(resultParent , function (d) { return d.id; }); 

        // parent steps Lines 
        parentStepLines 
         .enter() 
         .append("path") 
          .attr("d", function (d, i) { 

           // format: M 100 350 q 150 -300 300 0 
           // format: M startPointX startPointY q 
           var startPointX = ParentStepPosition(resultChildren.length)[0] + ParentStepSize(resultChildren.length); // far right side of the selected 
           var startPointY = ParentStepPosition(resultChildren.length)[1] + (ParentStepSize(resultChildren.length)/2); //half the height of the selected 

           var midPointX = ParentStepPosition(resultChildren.length)[0] + ParentStepSize(resultChildren.length); // far right side of the selected 
           var midPointY = SelectedStepPosition()[1] + SelectedStepSize()/2; 

           var endPointX = SelectedStepPosition()[0]; 
           var endPointY = SelectedStepPosition()[1] + SelectedStepSize()/2; 

           return "M" + " " + startPointX + " " + startPointY + " Q " + midPointX + " " + midPointY + " " + endPointX + " " + endPointY; 
          }) 
          .style("stroke", "#0083d6") 
          .style("stroke-width", "5") 
          .style("fill", "none"); 

        parentStepLines.exit().remove(); 


        // CURRENT step 
        var currentStep = svg.select(".result").selectAll("rect") 
         .data(result, function (d) { return d.id; }); 

        currentStep.enter().append("rect") 
         .attr("x", SelectedStepPosition()[0]) 
         .attr("y", SelectedStepPosition()[1]) 
         .attr("width", SelectedStepSize()) 
         .attr("height", SelectedStepSize()) 
         .attr("fill", "#003f87") 
         .attr("onclick", "") 
         .text(function (d) { return "id: " + d.id }); 

        currentStep.exit().remove(); 

        var currentStepText = svg.select(".result").selectAll("g") 
              .data(result, function (d) { return d.id; }); 

        // current step text 
        currentStepText 
         .enter() 
         .append("g") 
         .append(function (d, i) { 

          //console.log("textHeight: " + textHeight + ", lineCount :" + lineCount); 
          textHeight = 0; 
          var svgText = createSVGtext(d.title 
                    , SelectedStepPosition()[0] + (SelectedStepSize()/2) 
                    , SelectedStepPosition()[1] + ((SelectedStepSize() - TextHeight(d.title))/2) + 4 
                    ); 
          //console.log("textHeight: " + textHeight + ", lineCount :" + lineCount); 
          return svgText; 
         }) 
         .attr("font-family", "sans-serif") 
         .attr("font-size", "12px") 
         .attr("fill", "white") 
         .attr("text-anchor", "middle"); 

        currentStepText.exit().remove(); 

        // CHILDREN 
        // i.e. next available steps 
        // use the ID as the key when linking the data 
        var childrenSteps = d3.select(".resultChildren").selectAll("rect") 
             .data(resultChildren, function (d) { return d.id; }); 

        childrenSteps 
         .enter() 
         .append("rect") 
         .attr("x", function (d, i) { return ChildStepPosition(i, resultChildren.length)[0]; }) 
         .attr("y", function (d, i) { return ChildStepPosition(i, resultChildren.length)[1]; }) 
         .attr("width", SelectedChildStepSize(resultChildren.length)[1]) 
         .attr("height", SelectedChildStepSize(resultChildren.length)[0]) 
         .attr("fill", "#003f87") 
         .attr("onclick", function (d, i) { return 'VisualizeIt(' + d.id + ')';}) 
         .text(function (d) { return "id: " + d.id }); 

        childrenSteps.exit().remove(); 

        var childrenStepsText = svg.select(".resultChildren").selectAll("g") 
            .data(resultChildren, function (d) { return d.id; }); 

        // children steps text 
        childrenStepsText 
         .enter() 
         .append("g") 
         .append(function (d, i) { 

          //console.log("textHeight: " + textHeight + ", lineCount :" + lineCount); 
          textHeight = 0; 
          var svgText = createSVGtext(d.asChildText 
                    , ChildStepPosition(i, resultChildren.length)[0] + (SelectedChildStepSize(resultChildren.length)[1]/2) 
                    , ChildStepPosition(i, resultChildren.length)[1] + ((SelectedChildStepSize(resultChildren.length)[0] - TextHeight(d.asChildText))/2) +4 
                    ); 
          //console.log("textHeight: " + textHeight + ", lineCount :" + lineCount); 
          return svgText; 
          }) 
         .attr("font-family", "sans-serif") 
         .attr("font-size", "12px") 
         .attr("fill", "white") 
         .attr("text-anchor", "middle") 
         .attr("onclick", function (d, i) { return 'VisualizeIt(' + d.id + ')'; }); 
        ; 


        childrenStepsText.exit().remove(); 



        var lineFunction = d3.svg.line(); 


        //child connectors 
        var childrenStepLines = svg.select(".resultChildren").selectAll("path") 
            .data(resultChildren, function (d) { return d.id; }); 

        // children steps Lines 
        childrenStepLines 
         .enter() 
         .append("path") 
          .attr("d", function (d, i) { 

           // format: M 100 350 q 150 -300 300 0 
           // format: M startPointX startPointY q 
           var startPointX = SelectedStepPosition()[0] + SelectedStepSize(); // far right side of the selected 
           var startPointY = SelectedStepPosition()[1] + (SelectedStepSize()/2); //half the height of the selected 

           var midPointX = SelectedStepPosition()[0] + SelectedStepSize(); // far right side of the selected 
           var midPointY = ChildStepPosition(i, resultChildren.length)[1] + SelectedChildStepSize(resultChildren.length)[0]/2; 

           var endPointX = ChildStepPosition()[0]; 
           var endPointY = ChildStepPosition(i, resultChildren.length)[1] + SelectedChildStepSize(resultChildren.length)[0]/2; 

           return "M" + " " + startPointX + " " + startPointY + " Q " + midPointX + " " + midPointY + " " + endPointX + " " + endPointY; 
          }) 
          .style("stroke", "#0083d6") 
          .style("stroke-width", "5") 
          .style("fill", "none"); 

        childrenStepLines.exit().remove(); 


        //update the iframe with the correct detailed html 
        d3.select("iframe").attr("src", "iFrameHTML/" + result[0].url); 
       }; 
      }); 

     }; 

おかげ

Answer 1

はコードがエラースライドを聞かせてライン250

TypeError: d3.svg is undefined

var lineFunction = d3.svg.line();

バージョン3.5.5でエラーを投げていました。バージョン4.2.8では、エラーを滑らせませんでした。

私が250行目をコメントアウトすると、子ステップラインが表示されます。私は250行目の目的を知らない。それは昔のプログラマーが作ったものだ。コード全体でlineFunctionという変数への参照はありません。