I am working on the searching nodes in force layout d3.js from this example fiddle.
<script type='text/javascript' src="http://code.jquery.com/ui/1.8.3/jquery-ui.min.js"></script>
<script type='text/javascript' src="http://code.jquery.com/ui/1.8.3/themes/smoothness/jquery-ui.css"></script>
<script src="http://d3js.org/d3.v3.js"></script>
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
</head>
<body>
<div class="ui-widget">
<input id="search">
<button type="button" onclick="searchNode()">Search</button>
</div>
//Constants for the SVG
var width = 500,
height = 500;
//Set up the colour scale
var color = d3.scale.category20();
//Set up the force layout
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
//Append a SVG to the body of the html page. Assign this SVG as an object to svg
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
//Read the data from the mis element
var mis = document.getElementById('mis').innerHTML;
graph = JSON.parse(mis);
//Creates the graph data structure out of the json data
force.nodes(graph.nodes)
.links(graph.links)
.start();
//Create all the line svgs but without locations yet
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function (d) {
return Math.sqrt(d.value);
});
//Do the same with the circles for the nodes - no
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 8)
.style("fill", function (d) {
return color(d.group);
})
.call(force.drag);
//Now we are giving the SVGs co-ordinates - the force layout is generating the co-ordinates which this code is using to update the attributes of the SVG elements
force.on("tick", function () {
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;
});
});
var optArray = [];
for (var i = 0; i < graph.nodes.length - 1; i++) {
optArray.push(graph.nodes[i].name);
}
optArray = optArray.sort();
$(function () {
$("#search").autocomplete({
source: optArray
});
});
function searchNode() {
//find the node
var selectedVal = document.getElementById('search').value;
var node = svg.selectAll(".node");
if (selectedVal == "none") {
node.style("stroke", "white").style("stroke-width", "1");
} else {
var selected = node.filter(function (d, i) {
return d.name != selectedVal;
});
selected.style("opacity", "0");
var link = svg.selectAll(".link")
link.style("opacity", "0");
d3.selectAll(".node, .link").transition()
.duration(5000)
.style("opacity", 1);
}
}
</script>
</body>
</html>e
I am getting the error:
Uncaught ReferenceError: jQuery is not defined(anonymous function) @ jquery-ui.min.js:8 jquery-ui.css:13 Uncaught SyntaxError: Unexpected token . searchingforcelayout.html:1362 Uncaught ReferenceError: $ is not defined
I have included
<script type='text/javascript' src="http://code.jquery.com/ui/1.8.3/jquery-ui.min.js"></script>
<script type='text/javascript' src="http://code.jquery.com/ui/1.8.3/themes/smoothness/jquery-ui.css"></script>
It works well in fiddle but does not work on my system. I am using Chrome as my browser.
Did you include jQuery? Ensure that it is included before including the jQuery UI JS library