没什么卵用的ajax+D3.js

没什么卵用的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>