没什么卵用的ajax+D3.js

<script type="text/javascript">
                    $(document).ready(function(){
                        $('button').click(function DoAjax(){
            var temp=$('#search-recipeKG-text').val()
            $.ajax({
                url:'',           //url相当于 form 中的 action
                type:'GET',            //type相当于form 中的 method
                data:{'search-recipeKG-text':temp},       // data：传人的数据 dat为任意设置的内容，相当于模版中的{author:lee}
                success:function(arg){     //成功执行  console.log() 函数 arg 为HttpResponse 返回的值
                    var obj=jQuery.parseJSON(arg)    //转化成JS识别的对象
                    console.log(obj)          //打印obj
                    console.log(arg)              //json.dumps(data) 序列化后的数据
                    console.log('request.POST 提交成功')
                    var str='';
                    str+='<div class="col-lg-8">';
                    str+='<div class="card">';
                        str+='<div class="card-body" >';
                            str+='<div id="id1">';
                                    var height=600;
                                    var width=650;

                                    var colors = ['#6ca46c', '#4e88af', '#ca635f', '#d2907c', '#d6744d', '#ded295'];

                                    var svg=d3.select("#id1")
                                        .append("svg")
                                        .attr("width",width)
                                        .attr("height",height);

{#                                  利用d3.forceSimulation()定义关系图 包括设置边link、排斥电荷charge、关系图中心点#}
                                    var simulation = d3.forceSimulation()
	                                    .force("link", d3.forceLink().id(function(d) {
	                                        return d.id;
	                                    }))
	                                    .force("charge", d3.forceManyBody())
	                                    .force("center", d3.forceCenter(width / 2, height / 2));

{#                                  存储关系图的数据#}
	                                var graph=obj;

                                    //D3映射数据至HTML中
	    	                        //g用于绘制所有边,selectALL选中所有的line,并绑定数据data(graph.links),enter().append("line")添加元素
	    	                        //数据驱动文档,设置边的粗细
                                    //所有线宽度均为1
	    	                        var link = svg.append("g").attr("class","links").selectAll("line").data(graph.links).enter()
	    	                        .append("line").attr("stroke-width", function(d) {
	    		                        //return Math.sqrt(d.value);
	    		                        return 1;
	    	                        });

                                    //添加所有的点
	    	                        //selectAll("circle")选中所有的圆并绑定数据,圆的直径为d.size
	    	                        //再定义圆的填充色,同样数据驱动样式,圆没有描边,圆的名字为d.id
	    	                        //call()函数：拖动函数,当拖动开始绑定dragstarted函数，拖动进行和拖动结束也绑定函数
	    	                        var node = svg.append("g").attr("class", "nodes").selectAll("circle").data(graph.nodes).enter()
	    	                        .append("circle").attr("r", function(d) {
	    		                        return d.size;
	    	                        }).attr("fill", function(d) {
	    		                        return colors[d.group];
	    	                        }).attr("stroke", "none").attr("name", function(d) {
	    		                        return d.id;
	    	                        }).call(d3.drag()
	    		                        .on("start", dragstarted)
	    		                        .on("drag", dragged)
	    		                        .on("end", dragended)
	    	                        );

                                    //显示所有的文本
                                    //设置大小、填充颜色、名字、text()设置文本
                                    //attr("text-anchor", "middle")文本居中

                                    var text = svg.append("g").attr("class", "texts").selectAll("text").data(graph.nodes).enter()
                                    .append("text").attr("font-size", function(d) {
                                        return d.size;
                                    }).attr("fill", function(d) {
                                        return colors[d.group];
                                    }).attr('name', function(d) {
                                        return d.id;
                                    }).text(function(d) {
                                        return d.id;
                                    }).attr('text-anchor', 'middle').call(d3.drag()
                                        .on("start", dragstarted)
                                        .on("drag", dragged)
                                        .on("end", dragended)
                                    );


                                        //圆增加title
                                    node.append("title").text(function(d) {
                                            return d.id;
                                        })

                                        //simulation
                                        //ticked 数据初始化，并生成图形

                                        simulation
                                            .nodes(graph.nodes)
                                            .on("tick", ticked);

                                        simulation.force("link")
                                            .links(graph.links);


                                        //开始拖动并更新相应的点
	                                function dragstarted(d) {
	                                    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
                                        d.fx = d.x;
	                                    d.fy = d.y;
                                        //dragging = true;
	                                }

	                                //拖动进行中
	                                function dragged(d) {
	                                    d.fx = d3.event.x;
	                                    d.fy = d3.event.y;
	                                }

	                                //拖动结束
                                    function dragended(d) {
	                                    if (!d3.event.active) simulation.alphaTarget(0);
	                                    d.fx = null;
	                                    d.fy = null;
	                                    //dragging = false;
	                                }

                                    //tick()函数确定link线的起始点x、y坐标 node确定中心点 文本通过translate平移变化
                                        function ticked() {
                                    link
                                        .attr("x1", function(d) {
                                            return d.source.x;
                                        })
                                        .attr("y1", function(d) {
                                            return d.source.y;
                                        })
                                        .attr("x2", function(d) {
                                            return d.target.x;
                                        })
                                        .attr("y2", function(d) {
                                            return d.target.y;
                                        });

                                    node
                                        .attr("cx", function(d) {
                                            return d.x;
                                        })
                                        .attr("cy", function(d) {
                                            return d.y;
                                        });

                                    text.
                                    attr('transform', function(d) {
                                        return 'translate(' + d.x + ',' + (d.y + d.size / 2) + ')';
                                    });
                                }
                                    str+='</div>';
                                    str+='</div>';
                                    str+='</div>';
                                    str+='</div>';
                                    console.log(str)
                                    $("#show").html(str);
                        },
                                            error:function(){
                        //失败
                                                console.log('失败')
                                            }
                                        });
                                    });
                    });
                </script>