Fatal编程技术网

Javascript D3在Firefox中不工作

javascript firefox d3.js

Javascript D3在Firefox中不工作,javascript,firefox,d3.js,Javascript,Firefox,D3.js,我正在D3中进行集群设计。在Chrome中运行时没有问题（除了控制台中的一些错误） 但当我使用Firefox运行时，页面看起来是空白的，Firefox控制台是空白的 我应该怎么做才能让D3在Firefox中工作。任何建议都会有帮助。这是我的完整代码： index.html： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; chars

我正在D3中进行集群设计。在Chrome中运行时没有问题（除了控制台中的一些错误） 但当我使用Firefox运行时，页面看起来是空白的，Firefox控制台是空白的

我应该怎么做才能让D3在Firefox中工作。任何建议都会有帮助。这是我的完整代码：

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Radial Cluster Demo</title>
    <script src="//d3js.org/d3.v3.min.js"></script> 
    <style>
        .node {
            cursor: pointer;
        }
        .overlay {
            background-color:white;
        }
        .node circle {
            fill: #fff;
            stroke: steelblue;
            stroke-width: 1.5px;
        }
        .node text {
            font: 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">
        var selectedNode = null;
        var draggingNode = null;

        var panSpeed = 200;
        var panBoundary = 0; 

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

        var width = 5000;
        var height = 5000;

        var diameter = 750;

        var tree = d3.layout.tree().size([360, diameter / 2 - 120])
            .separation(function (a, b) {
                return (a.parent == b.parent ? 1 : 5) / a.depth;
            });

        var diagonal = d3.svg.diagonal.radial()
            .projection(function (d) {
                return [d.y, d.x / 180 * Math.PI];
            });


        d3.select(self.frameElement).style("height", width);

        function sortTree() {
            tree.sort(function (a, b) {
                return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1;
            });
        }

        sortTree();

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

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

        d3.json("index.php", function(error, flare) {
            if (error) throw error;

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

            flare.children.forEach(collapse);
            update(root);

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

                update(d);
            }

            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.children) 
                    root.children.forEach(collapse);
                    //d.children = d._children;
                    //    d._children = null;

                if (d3.event.defaultPrevented) return; 

                d = toggleChildren(d);

                update(d);
            }

            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) + "px")     
                            .style("top", (d3.event.pageY - 40) + "px") 
                            .style("left", r.left + 40+"px")
                            .style("left",  + "px")
                            .style("position", "absolute")
                            .text(d.t);
                    })
                    .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("fill",function(d){return (d.children?"red":"black");})
                        .attr("stroke-width",function(d){return (d.children?"4":"1");})
                        .attr("stroke-width",function(d){return (d.children?"4 px":"1 px");})
                        .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);
            })
    </script>
</body>
</html>


径向簇演示
.节点{
光标：指针；
}
.覆盖{
背景色：白色；
}
.节点圆{
填充：#fff；
笔画：钢蓝；
笔划宽度：1.5px；
}
.节点文本{
字体：无衬线；
字号：80%；
文本对齐：居中；
}
.链接{
填充：无；
} 
.家长{
填充物：红色；
}
div#工具提示{
位置：绝对位置；
字体：15px无衬线；
背景：橙色；
边界半径：8px；
左侧填充：5px；
右侧填充：5px；
指针事件：无；
}
var selectedNode=null；
var draggingNode=null；
var panSpeed=200；
var panBoundary=0；
var i=0；
var持续时间=750；
变种根；
可变宽度=5000；
var高度=5000；
var直径=750；
var tree=d3.layout.tree（）.size（[360，直径/2-120]）
.分离（功能（a、b）{
返回（a.parent==b.parent？1:5）/a.depth；
});
var diagonal=d3.svg.diagonal.radial（）
.投影（功能（d）{
返回[d.y，d.x/180*Math.PI]；
});
d3.选择（self.frameElement）.样式（“高度”，宽度）；
函数sortTree（）{
树。排序（函数（a，b）{
返回b.name.toLowerCase（）0）{
如果（levelWidth.length 0）{

如果（levelWidth.length
return“rotate”（+（d.x-90）+）”）translate（+d.y+”）rotate（+（-d.x+90）+）”）
-在您的代码中，它跨越两行，并且破坏了firefox和chrome-而且，我看不出您如何处理这种糟糕的格式！难怪您的代码中有未终止的字符串文字，但现在在您的帮助下它可以正常工作…但是在尝试基于输入获取时没有运气。使用ajaxi时，意味着打开按钮单击控制台错误w我会告诉你所有你需要知道的是我使用ajax的方式是rite？在更新中。。

<script>
    $(function (all) {
         $('form').on('submit', function (e) {
         e.preventDefault();
           var t=$('form').serialize();
          var u='http://localhost:8888/saff/indexi.php?'+t;
         $.ajax({
         url:u,
        async:true,
        success:function(data){
        myFunction();
        }
        });
  function myFunction(){
 d3.json(u, function(treeData) {
      //d3 code
           });
     }
    });
    });
  </script>



       <!DOCTYPE html>
        <html>
        <head>
     <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8" />
        <title>Tring Reset</title>
        <style>
        .node {
            cursor: pointer;
        }
        .overlay {
            background-color:white;
        }
        .node circle {
            fill: #fff;
            stroke: steelblue;
            stroke-width: 1.5px;
        }
        .node text {
             font: sans-serif;

            text-align: center;
        }
        .link {
            fill: none;   
        } 
        .parent{
        fill :red;
        font-weight:lighter;
        }
        div#tooltip {   
            position: absolute;         
              font: 15px sans-serif;        
            background: orange; 
             border-radius: 8px;    
                padding-left: 5px;
                padding-right: 5px;
            pointer-events: none;           
        }
        </style>
        <script src="//d3js.org/d3.v3.min.js"></script>
        <script src="jquery-1.11.1.min.js"></script>
        </head>
        <body>  
        <form name="editorForm"> 
                <input type="text"name="editor"/>
        <input type="submit"value="butn">
        </form>
         <div id="tooltip" style="display:none"></div>
        <div id="tree-container"class="full"></div>
        <script>
        $('form').find(':submit').on('click', function() {
                var t = $('form').serialize();
                var u = 'http://localhost:8888/saff/indexi.php?' + t;
                        $.ajax({
                            url: u,
                            async: true,
                            success: function(data) {
                                myFunction(data);
                            }
                        });
        function myFunction(){
        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 = 750;

        var tree = d3.layout.tree().size([360, diameter / 2 - 120])

            .separation(function (a, b) {
            return (a.parent == b.parent ? 1 : 5) / a.depth;
        });
        var diagonal = d3.svg.diagonal.radial()
         .projection(function (d) {
            return [d.y, d.x / 180 * Math.PI];
        });
        d3.json(u, function(error, treeData) {
          if (error) throw error;
        root = treeData;
        root.x0 = height / 2;
        root.y0 = 0;
        root = treeData;
        root.x0 = height / 2;
        root.y0 = 0;

        function sortTree() {
            tree.sort(function (a, b) {
            return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1;
            });
        }
        sortTree();
        var baseSvg = d3.select("#tree-container").append("svg")
            .attr("width", 1200)
            .attr("height",1200)
            .attr("class", "overlay")

         .attr("transform", "translate(" + 1000 + "," + 1000 + ")");
        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) 
            treeData.children.forEach(collapse);

            if (d3.event.defaultPrevented) return; 

            d = toggleChildren(d);

            update(d);
        }
        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("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) + "px")     
                        .style("top", (d3.event.pageY - 40) + "px") 
                      .style("left", r.left + 40+"px")
                      .style("left",  + "px")
                        .style("position", "absolute")
                       .text(d.t);
                 })
            .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", 9)
           .attr("fill",function(d){return (d.children?"red":"black");})
     .attr("font-size",function(d){return (d.children?"20px":"12px");})
         .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.x, y: source.y};
                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);
        });
        }
        return false;
        });
        </script>
        </body>
        </html>