Ajax not working

JavaScript
1

i am working in D3…based on the input i want to fetch data from the database to D3…when i type some word in the input field and click submit it works fine…there is no problem in D3
THE Problem is
*WHEN I SUBMIT FIRST WORD IT GET CORRECT DESIGN IN WEBPAGE
*WHEN I CHANGE THE INPUT TEXT,THE SECOND DESIGN COMES BELOW THE FIRST DESIGN dont know where it is wrong…why ajax is not working???

my ajax part

$(document).ready(function(){
$('form').find(':submit').on('click', function(e) {
 e.preventDefault();
  var t=$('form').serialize();
  var u='http://localhost:8888/saff/indexi.php?'+t;
               $.ajax({
						url: u,
						async: true,
						cache:false,
						success: function(data) {
							funn(data);
						}
					});	

function funn(){
//d3 codes
d3.json(u, function(error, treeData) {
  if (error) throw error;
//d3 codes
});
};
});
});

my complete code

<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.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;
	
	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>
    </head>
<body>
	<form name="editorForm"> 
	<input type="text"name="editor"  id="editor"/>
	<input type="submit"value="submit">
	</form>
<div id="tooltip" style="display:none"></div>
<div id="tree-container"class="full"></div>
<script type="text/javascript">
$(document).ready(function(){
$('form').find(':submit').on('click', function(e) {
 e.preventDefault();
  var t=$('form').serialize();
  var u='http://localhost:8888/saff/indexi.php?'+t;
               $.ajax({
						url: u,
						async: true,
						cache:false,
						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;

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("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", 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.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>

when i enter the word அகல் and click submit the webpage looks like this

1355×686 52.2 KB

when i change the input text to அகடம்
1363×498 20.1 KB
appears below the அகல் design…

2

You are using funn(data) without usage the data argument inside the funn function.Can you give us a data response from ajax call and a image how it looks your page?

3

thanks for your response…plz see my updates

5

Try to change the

var baseSvg = d3.select("#tree-container").append("svg")

To

var baseSvg = d3.select("#tree-container").append("svg")

and look in your console for possible errors

1279×243 14.3 KB

6

but @liontas76 both var baseSvg seems to be same:no_mouth:

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.