从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未定义

     

var lineFunction = d3.svg.line（）;

版本3.5.5让错误滑动。在版本4.2.8中，它没有让错误滑动。

一旦我注释掉第250行，就会显示子步骤行。我不知道第250行的目的。一个真正的程序员创建它。整个代码中没有引用名为lineFunction的变量。