Javascript 基于D3的输入获取数据时Ajax不起作用_Javascript_Php_Jquery_Ajax_D3.js

Javascript 基于D3的输入获取数据时Ajax不起作用

javascript php jquery ajax d3.js

Javascript 基于D3的输入获取数据时Ajax不起作用,javascript,php,jquery,ajax,d3.js,Javascript,Php,Jquery,Ajax,D3.js,我在D3中工作。根据输入，我想从数据库中获取数据到D3。当我在输入字段中键入一些单词并单击“提交”时，它工作正常…D3中没有问题…但当我更改输入字段时，提交按钮中没有任何操作。它希望我刷新以搜索新单词…我的方式是否有任何错误在这里使用ajax $(function (all) { $('form').on('submit', function (e) { e.preventDefault();

我在D3中工作。根据输入，我想从数据库中获取数据到D3。当我在输入字段中键入一些单词并单击“提交”时，它工作正常…D3中没有问题…但当我更改输入字段时，提交按钮中没有任何操作。它希望我刷新以搜索新单词…我的方式是否有任何错误在这里使用ajax

            $(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){
            funn();
            }
            });
      function funn(){
   d3.json(u, function(treeData) {
          //d3 code
               });
         }
        });
        });

其次，当我将表单输入更改为

     <form name="editorForm" id="formi"> 
     <input type="text" name="editor" 
     id="editor" onchange="document.getElementById('formi').submit();"/>
    <input type="submit"value="butn">
    <br />
    </form>

在字段中键入word，并仅在url中进行更改时提交到，网页中不显示任何内容我应该如何在d3中使用ajax根据输入将数据从php获取到d3，而无需页面刷新

问题是 *当提交的第一个字，它得到正确的网页设计 *当我更改输入文本时，第二个设计位于第一个设计的下方为什么ajax不起作用？？？更新我的完整代码

            <!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) {
                                    funn(data);
                                }
                            });
            function funn(){
            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>


字符串重置
.节点{
光标：指针；
}
.覆盖{
背景色：白色；
}
.节点圆{
填充：#fff；
笔画：钢蓝；
笔划宽度：1.5px；
}
.节点文本{
字体：无衬线；
文本对齐：居中；
}
.链接{
填充：无；
} 
.家长{
填充物：红色；
字体重量：较轻；
}
div#工具提示{
位置：绝对位置；
字体：15px无衬线；
背景：橙色；
边界半径：8px；
左侧填充：5px；
右侧填充：5px；
指针事件：无；
}
$（'form'）。查找（':submit'）。在（'click'，function（）上{
var t=$（'form'）.serialize（）；
var u='1http://localhost:8888/saff/indexi.php?“+t；
$.ajax({
网址：u，
async:true，
成功：功能（数据）{
funn（数据）；
}
});
函数funn（）{
var selectedNode=null；
var draggingNode=null；
var panSpeed=200；
var panBoundary=0；
var i=0；
var持续时间=750；
变种根；
var width=$（文档）.width（）；
var height=$（document.height（）；
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]；
});
json（u，函数（error，treeData）{
如果（错误）抛出错误；
根=treeData；
root.x0=高度/2；
root.y0=0；
根=treeData；
root.x0=高度/2；
root.y0=0；
函数sortTree（）{
树。排序（函数（a，b）{
返回b.name.toLowerCase（）0）{
如果（levelWidth.length）谢谢您，先生，感谢您的回复和兴趣…但很抱歉，问题仍然不清楚..请查看问题中我的控制台图片..控制台中有一些更改..但不在网页中..您路径中的文件是否实际包含“i”indexi.php？我想你在其他地方有一个错误，而不是在本页给出的代码中。根据你的屏幕截图，它来自d3.js脚本。或者从服务器返回的数据格式不是正确的json。我有一个疑问……那么，当我刷新页面以获取电子邮件时，它是如何工作的
$('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) {
            funn(data);
        }
    });

    function funn(treeData) {
        d3.json(u, function(error, treeData) {
            //d3 code
        });
    }
    return false;
});