IEでd3ツリーのハイライトパスが機能しない

JSFiddleの例のようにツリーレイアウトを作成しました。http://jsfiddle.net/oo66o0q0/15/。ノードの右クリックメニューの[ルートの強調表示]オプションをクリックすると、パスが赤で強調表示され、余分な幅が強調表示されます。これはクロムで正しく機能していますが、IEの強調表示されたルートの色は黒になります。マーカーを削除すると、IEでも動作します。 IEでこの問題を解決するにはどうすればよいですか？IEでd3ツリーのハイライトパスが機能しない

function treeInitialize(graphData){ 

    diagramLayout = d3.select("#diagramLayout") 
         .attr("id", "diagramLayout")//set id 
         .attr("width", width)//set width 
         .attr("height", height)//set height 
         .append("g") 
         .attr("transform", "translate(" + 20 + "," + 20 + ")") 

    markerRefx = 40; 

    var data2 = graphData.links.filter(function(l){ 
     if(l.target == undefined && l.source == undefined){ 
      return false; 
     }else{ 
      return true; 
     } 
     }); 
    data2.push(JSON.parse('{"target":"glossforArrow","source":""}')) 

    var treeData = d3.stratify().id(function(d){ return d.target; }).parentId(function(d) { 
         return d.source;  
        })(data2) 

    nodes = d3.hierarchy(treeData, function(d) {return d.children;}); 

    var levelWidth = [1]; 
    var childCount = function(level, n) { 

     if(n.children && n.children.length > 0) { 
     if(levelWidth.length <= level + 1) levelWidth.push(0); 

     levelWidth[level+1] += n.children.length; 
     n.children.forEach(function(d) { 
      childCount(level + 1, d); 
     }); 
     } 
    }; 
    childCount(0, nodes);  
    newHeight = d3.max(levelWidth) * 100;  
    var tree = d3.tree().size([height, width]) 

    tree.size([newHeight,height/2]); 

    tree.separation(function (a, b) { 
       return a.parent == b.parent ? 50 : 100; 
      });      
    nodes = tree(nodes);  
    treeLayout(nodes); 

       function treeLayout(nodes){ 

       var node = diagramLayout.selectAll(".node"); 
       node = node.data(nodes.descendants()); 

       var link = diagramLayout.selectAll(".link") 
     .data(nodes.descendants().slice(1)) 
     .enter().append("path") 
     .attr("class", "link") 
     .attr("fill", "none") 
     .attr("stroke", "#000") 
     .attr("stroke-width", "1px") 
     .attr("stroke-opacity", "0.3") 
     .attr("d",connector) 

     nodes.descendants().slice(1).forEach(function(d) { 

        var mark = diagramLayout.append("svg:defs").selectAll("marker")// 
         .data(["start"])  // Different link/path types can be defined here 
         .enter().append("svg:marker") // This section adds in the arrows 
         .attr("id", String) 
         .attr("viewBox", "0 -5 10 10") 
         .attr("refX", -markerRefx) 
         .attr("refY", 0) 
         .attr("markerWidth", 5) 
         .attr("markerHeight", 5) 
         .attr("orient", "auto") 
         .attr("stroke", "#000") 
         .attr("fill", "#000") 
         .append("svg:path") 
         .attr("d", "M0,-5L10,0L0,5") 
         .style("stroke-width", "0.3px") 
      .attr("transform","rotate(180,5, 0)"); 

       }); 

     link.attr("marker-start", "url(#start)") 




       var nodeEnter = node.enter().append("g") 
       .attr("class", "node") 
       .attr("height", nodeHeight) 
       .attr("width", nodeWidth) 
        nodeEnter.attr("transform", function(d) { 
         return "translate(" + project(d.x, d.y) + ")"; 
        }).on('contextmenu', menuCall); 


       var nodeIcon = nodeEnter.append("rect") 
       .attr("class", "rect") 
       .attr("x", -20) 
       .attr("y", -20) 
       .attr("rx", 10) 
       .attr("width", 40) 
       .attr("height", 40) 
       .attr("stroke-width", function(d) { return Math.sqrt(2); }) 
       .attr("stroke-opacity", "0.3") 
       .attr("stroke", "#000") 
       .attr("fill", "blue") 


       //wrap(nodeText, 8) 
      } 

    } 

    function connector(d) { 
     return "M" + project(d.x, d.y) 
       + "C" + project(d.x, (d.y + d.parent.y)/2) 
       + " " + project(d.parent.x, (d.y + d.parent.y)/2) 
       + " " + project(d.parent.x, d.parent.y); 
    } 

    function project(x, y) { 

     return [x,y]; 
    } 

    function menuCall(di,i) { 
    var nodeClicked = d3.select(this); 
    var menuitems = ["Highlight route"]; 

    d3.selectAll('.context-menu').data([1]) 
     .enter() 
     .append('div') 
     .attr('class', 'context-menu'); 
     // close menu 
    d3.select('body').on('click.context-menu', function() { 
     d3.select('.context-menu').style('display', 'none'); 
     }); 
     // this gets executed when a contextmenu event occurs 
    d3.selectAll('.context-menu') 
     .html('') 
     .append('ul') 
     .selectAll('li') 
      .data(menuitems).enter() 
      .append('li') 

     .on('click' , function(d) { 
    // d3.select('.context-menu').style('display', 'none');   
    if(d=="Highlight route"){ 
    var id = nodeClicked.datum().data.id; 
         var node = diagramLayout.selectAll(".node"); 
         var link = diagramLayout.selectAll(".link"); 

         link.style("stroke","black").style("stroke-width", "1.5px") 
         var linkSelected = link.filter(function (d, i) { 
       console.log(d.data.id) 
       console.log(id) 
       return d.data.id === id;}); 
         linkSelected.style("stroke", "red").style("stroke-width", "5px"); 

       } 
      d3.select('.context-menu').style('display', 'none'); 
       }).text(function(di) { return di; }); 

      d3.select('.context-menu').style('display', 'none'); 
       // show the context menu 
      d3.select('.context-menu') 
       .style('left', (d3.event.pageX - 2) + 'px') 
       .style('top', (d3.event.pageY - 2) + 'px') 
       .style('display', 'block'); 
      d3.event.preventDefault(); 

    }

出典

2017-03-10 user6821214