Question

我在JSFiddle示例http://jsfiddle.net/oo66o0q0/15/中创建了树布局。需求是当用户单击节点的右键菜单“突出显示路径”选项时，路径应以红色突出显示并具有额外宽度。这正在使用chrome正确，但在IE中突出显示路线颜色变为黑色。如果我删除标记，那么它也适用于IE。如何在IE中解决此问题但不删除标记？

    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();

    }

Answer 1

看起来像IE中的一个错误。如果在应用突出显示后检查DOM，IE会报告内联样式已覆盖工作表样式（应该如此），但路径不会更新：

我能想到的唯一解决方法是删除类链接

上的表格描边样式

.link {
  stroke-opacity: .6;
}

然后直接应用所有样式。

更新了fiddle。

在d3树中突出显示路径在IE中不起作用

1 个答案: