Question

Chrome中的群集布局设计 ..其中tooltip2是child2的工具提示

FireFox 中的相同设计在firefox中，工具提示处于错误的位置

        <!DOCTYPE html>
           <html>

             <head>
           <title>Radial Cluster Demo</title>
           <meta http-equiv="content-type" 
             content="text/html; charset=utf-8" />
              <script src="d3.min.js"></script>  
                <script src="jquery.js"></script>
            <style>
        .node {
            cursor: pointer;
        }
        .overlay {
            background-color:white;
        }
        .node circle {
            fill: #fff;
            stroke: steelblue;
            stroke-width: 1.5px;
        }
        .node text {
             font: 10px sans-serif;
            font-size: 80%;
            text-align: center;
        }
        .link {
            fill: none;   
        } 
        .parent{
        fill :red;
        }
        div#tooltip {   
            position: absolute;         
              font: 15px sans-serif;        
            background: orange; 
             border-radius: 8px;    
                padding-left: 5px;
                padding-right: 5px;
            pointer-events: none;           
        }

         </style>
            </head>

          <body>
         <div id="tooltip" style="display:none"></div>
        <div id="tree-container"class="full"></div>
        <script type="text/javascript">
         myJSON  =

                {
                  "name": "headword",
                  "tooltip": "(திவ்.இயற்.நான்மு.2.1).",
                  "color": "#FF0000",
                  "children": [
                    {
                      "name": "child 1",
                      "tooltip": "tooltip1",
                      "color": "#FF0000"
                    },
                    {
                      "name": "child 2",
                      "tooltip": "tooltip2",
                      "color": "#FF0000"
                    },
                    {
                      "name": "child 3",
                      "tooltip": "tooltip3",
                      "color": "#FF0000"
                    },
                    {
                      "name": "child 4",
                      "tooltip": "tooltip4",
                      "color": "#FF0000"
                    },
                    {
                      "name": "child 5",
                      "tooltip": "tooltip5",
                      "color": "#FF0000"
                    }
                  ]
                };
        treeData = myJSON;
        var selectedNode = null;
        var draggingNode = null;

        var panSpeed = 200;
        var panBoundary = 0; 

        var i = 0;
        var duration = 750;
        var root;

        var width = $(document).width();
        var height = $(document).height();

        var diameter = 550;

        var tree = d3.layout.tree().size([360, diameter / 2 - 120])
            .separation(function (a, b) {
            return (a.parent == b.parent ? 1 : 5) / a.depth;
        });
        var drag = d3.behavior.drag();
        var diagonal = d3.svg.diagonal.radial()
            .projection(function (d) {
            return [d.y, d.x / 180 * Math.PI];
        });

        root = treeData;
        root.x0 = height / 2;
        root.y0 = 0;


        var baseSvg = d3.select("#tree-container").append("svg")
            .attr("width", width)
            .attr("height", height)
            .attr("class", "overlay");

        function collapse(d) {

            if (d.children) {
                d._children = d.children;
                d._children.forEach(collapse);
                d.children = null;
            }

        update(d);
        }

        function expand(d) {

            if (d._children) {
                d.children = d._children;
                d.children.forEach(expand);
                d._children = null;
            }
        }
        function toggleChildren(d) {

            if (d.children) {
                d._children = d.children;
                d.children = null;
            } else if (d._children) {
                d.children = d._children;
                d._children = null;
            }
            return d;
        }

        function click(d) {

        if(!d.parent)
        {
        return;
        }
        if (!d.children) 
             myJSON.children.forEach(collapse);

            if (d3.event.defaultPrevented) return; 
            d = toggleChildren(d);
            update(d);
         if(d.parent)
        {
        d3.selectAll("text").style("fill", 
        function (d) { return d3.select(this).classed(d.cond, true); })
                         return ;

         } 
        }

        function update(source) {

            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, root);
             var nodes = tree.nodes(root); 
            links = tree.links(nodes);
            node = svgGroup.selectAll("g.node")
                .data(nodes, function (d) {
                return d.id || (d.id = ++i);
            });

           var nodeEnter = node.enter().append("g")

                .attr("class", "node")

            .on('click', click)

              nodeEnter.append("circle")
                .attr("class", "smallcircle")
                    .style("stroke", function(d) {
              return d.color;
            })


            nodeEnter.append("text")

            .text(function (d) {
                return d.name;
            })
                .style("font", "12px serif")
                .style("opacity", 1)
                .style("fill-opacity", 0)

        .on("mouseover", function (d) {
          var r = d3.select(this).node().getBoundingClientRect();
                   d3.select("div#tooltip")
                        .style("display", "inline")

                     .style("top", (r.top-25) + "px")
                       .style("top", 10 + "px")
                    .style("left", (d3.event.pageX-90) + "px")      
                       .style("top", (d3.event.pageY - 90) + "px")  
                      .style("left", r.left + 40+"px")
                  .style("left",  + "px")
                       .text(d.tooltip);
                 })
            .on("mouseout", function(){
               d3.select("div#tooltip").style("display", "none")
           })


            node.select("circle.nodeCircle")
                .attr("r", 4.5)
                .style("fill", function (d) {
                return d._children ? "red" : "#fff";
            });
           var nodeUpdate = node.transition()
                .duration(duration)
                .attr("transform", function (d) {
                return "rotate(" + (d.x - 90) + ")
          translate(" + d.y + ")rotate(" + (-d.x + 90) + ")";
            });

            nodeUpdate.select("circle")
                .attr("r", 4.5)
                .style("fill", function (d) {
                return d._children ? "lightsteelblue" : "#fff";
            });
          nodeUpdate.select("text")
                .style("fill-opacity", 4)
          .attr("dy", ".35em")
                .attr("text-anchor", function (d) {
                return d.x < 180 ? "start" : "end";
            })
                .attr("transform", function (d) {
                return d.x < 180 ?
         "translate(8)" : "rotate(360)translate(-8)";
            });

            var nodeExit = node.exit().transition()
                .duration(duration)
                .attr("transform", function (d) {
                return "translate(" + source.x + "," + source.y + ")";
            })
                .remove();

            nodeExit.select("circle")
                .attr("r", 0);

            nodeExit.select("text")
                .style("fill-opacity", 0);


            var link = svgGroup.selectAll("path.link")
                .data(links, function (d) {
                return d.target.id;
            })
        link.style("stroke", function(d) {
              return d.color;
            })

            link.enter().insert("path", "g")
                .attr("class", "link")
                 link.style("stroke", function(d) {
              return d.target.color;
            })
                .attr("d", function (d) {
                var o = {
                    x: source.x0,
                    y: source.y0
                };
                return diagonal({
                    source: o,
                    target: o
                });
            });


            link.transition()
                .duration(duration)
                .attr("d", diagonal);


            link.exit().transition()
                .duration(duration)
                .attr("d", function (d) {
                var o = {
                    x: source.x,
                    y: source.y
                };
                return diagonal({
                    source: o,
                    target: o
                });
            })
                .remove();


            nodes.forEach(function (d) {
                d.x0 = d.x;
                d.y0 = d.y;
            });
        }



        var svgGroup = baseSvg.append("g").
       attr("transform", "translate(" + 550 + "," + 300 + ")");
        d3.selectAll("text").style("fill", function (d)
       { return d3.select(this).classed(d.cond, true); })


        root.children.forEach(function (child) {
            collapse(child);
        });

        update(root);
        d3.select(self.frameElement).style("height", width);
          </script>
        </body>

        </html>

这就是我试过的

    @media screen and (min--moz-device-pixel-ratio:0) {
   .firefox {
                div#tooltip {   
            position: absolute;         
              font: 15px sans-serif;        
            background: orange; 
             border-radius: 8px;    
                padding-left: 5px;
                padding-right: 5px;
            pointer-events: none;           
            }
                   }

和

            @-moz-document url-prefix(){
                  //tooltip css
                    }

使用上面的方法我没有在firefox工具提示位置得到任何改变。我可以克服这个问题吗？

更新：最后我得到了结果：

工具提示Css：

            div#tooltip {
            text-align: center;
            width:auto;
            margin-top: -5px; 
            position: absolute; 
            display:inline-block;   
            font: 15px sans-serif;      
            background: orange; 
            border-radius: 8px;
            max-width:150 px;
            padding-left: 5px;
            padding-right: 5px;
            pointer-events: none;           
            }

          //Tooltip portion

         .on("mouseover", function (d) {
       var r = d3.select(this).node().getBoundingClientRect();
         d3.select("div#tooltip")
            .style("display", "inline")
               .style("top", (r.top-55) + "px")
           .style("top", 25 + "px")
             .style("left", r.left + 80+"px")
          .style("left",  + "px")
             .html(d3.event.pageX + "<br\/> line")
          .style("left", (d3.event.pageX - 34) + "px")
       .style("top", (d3.event.pageY - 50) + "px")
         .text(d.tooltip);
     })
   .on("mouseout", function(){
   d3.select("div#tooltip").style("display", "none")
   })

Firefox中的工具提示位置不正确

0 个答案: