I have an application where i am populating a tree like structure with D3.js.Each node in this tree represents a name.I am able to catch the nodes name in a java script alert when i am clicking on the node .But my requirement is that i should send the name, which is coming with an alert to a Servlet.Here is my code
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node {
font: 10px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
</style>
<body>
<script type="text/javascript" src="d3/d3.v3.min.js"></script>
<script>
var width = 300;
height = 500;
var cluster = d3.layout.cluster()
.size([height, width - 160]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(40,0)");
d3.json("ActionServlet", function(error, root) {
var nodes = cluster.nodes(root),
links = cluster.links(nodes);
var link = svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal);
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.on("click", click)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
node.append("circle")
.attr("r", 4.5);
node.append("text")
.attr("dx", function(d) { return d.children ? -8 : 8; })
.attr("dy", 3)
.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.name; });
function click(d){
alert("This Number is: "+d.name);
}
});
d3.select(self.frameElement).style("height", height + "px");
</script>
I want the value in the ActionServlet which i am using to create a json.somebody please help.
Please change your click function with this-
function click(d){
var name=d.name;
$.ajax({
url: "ActionServlet",
type: "post",
data: { "root":name },
error:function(){
alert("error occured!!!");
},
success:function(d){
//alert(d.name);
}
});
}
});
Related
I have a force directed network diagram that has the capability to collapse nodes, but I want them to start collapsed at the third level, i.e. where the nodes' names are A, B, C, etc. How do I make them start collapsed like this?
I have tried a few things but this issue is currently over my head, as I'm a beginner. I would just like it to load with the third level of nodes visible and the rest collapsed. Thanks in advance!
Here is a fiddle as well. https://jsfiddle.net/arkatark/curejxy0/2/
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://d3js.org/d3.v3.js"></script>
<script>
var d3v3 = window.d3;
window.d3 = null;
</script>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
var d3v4 = window.d3;
window.d3 = null;
</script>
<style>
.forcewrap {
margin-left: auto;
margin-right: auto;
}
#force {
background-color: #BCE6E6;
margin-bottom: 100px;
}
.node circle {
cursor: pointer;
}
.node:hover circle {
stroke: #FFFFFF ;
stroke-width: 2px;
}
.node text {
font: 14px Gotham Narrow, sans-serif;
font-weight: bold;
pointer-events: none;
text-anchor: right;
display: none;
}
.node:hover text{
display: inline;
}
line.link {
fill: none;
stroke: rgb(255, 255, 255);
stroke-width: 1.5px;
}
</style>
</head>
<body>
<div class="container">
<div class="forcewrap">
<div id="force"></div>
</div>
</div>
</body>
(function() {
var width = 600,
height = 600,
root;
var force = d3v3.layout.force()
.linkDistance(40)
.charge(-100)
.gravity(.1)
.size([width, height])
.on("tick", tick);
var svg = d3v3.select("#force").append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link"),
node = svg.selectAll(".node");
d3v3.json("https://raw.githubusercontent.com/arkatark/colsec/main/nodes.json", function(error, json) {
if (error) throw error;
root = json;
update();
});
function update() {
var nodes = flatten(root)
links = d3v3.layout.tree().links(nodes);
// Restart the force layout.
force
.nodes(nodes)
.links(links)
.start();
// Update links.
link = link.data(links, function(d) { return d.target.id; });
link.exit().remove();
link.enter().insert("line", ".node")
.attr("class", "link");
// Update nodes.
node = node.data(nodes, function(d) { return d.id; });
node.exit().remove();
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.on("click", click)
.on('mouseover', function (d) {
tooltip
.html(d.title + "<br>" + d.recipient + "<br>" + d.date + "<br>" + d.summary)
.style('text-align', 'left')
.style('font-family', 'Gotham Narrow, sans-serif')
.style('font-size', '.8em')
.style("opacity", 1)
.style('padding', '5px')
.style("stroke", "#EEEEEE")
.style("background-color", "#FFFFFF")
})
.on('mouseout', function (d) {
tooltip
.style("opacity", 0)
})
.call(force.drag);
nodeEnter.append("circle")
.attr("r", function(d) { return Math.sqrt(d.size) / .6 || 4.5; });
var label = nodeEnter.append("text")
.attr("dy", ".35em")
.attr("x", 11)
.text(function(d) { return d.name; })
node.select("circle")
.style("fill", color)
}
var tooltip = d3v3.select("#force")
.append("div")
.style("opacity", 0)
.attr("class", "tooltip")
.style("background-color", "#FFFFFF")
.style("border-style", "solid")
.style("border-width", "1px")
.style("position", "absolute")
.style('width','500px')
.style('margin-top', '0px')
.style('margin-left', '7%')
.style('line-height','1.5')
function zoomed() {
svg.attr("transform", d3.event.transform);}
function tick() {
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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
function color(d) {
return d._children ? "#413C58" // collapsed package
: d.children ? "#F08700" // expanded package
: "#008489"; // leaf node
}
// Toggle children on click.
function click(d) {
if (d3v3.event.defaultPrevented) return; // ignore drag
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update();
}
// Returns a list of all nodes under the root.
function flatten(root) {
var nodes = [], i = 0;
function recurse(node) {
if (node.children) node.children.forEach(recurse);
if (!node.id) node.id = ++i;
nodes.push(node);
}
recurse(root);
return nodes;
}
})();
I'm using the cluster layout of D3.js and I'd like to allow multiple parents.
How can a node have multiple parents ?
Here is what I have so far: (JSFiddle)
var json = {
"name": "cluster",
"children": [{
"name": "AgglomerativeCluster"
}, {
"name": "CommunityStructure"
}, {
"name": "HierarchicalCluster"
}, {
"name": "MergeEdge"
}]
};
var width = 500,
height = 250;
var cluster = d3.layout.cluster()
.size([width, height - 160]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(0, 40)");
var nodes = cluster.nodes(json);
var link = svg.selectAll(".link")
.data(cluster.links(nodes))
.enter().append("path")
.attr("class", "link")
.attr("d", function(d, i) {
return "M" + d.source.x + "," + d.source.y + "V" + (d.target.y / 2) + "H" + d.target.x + "V" + d.target.y;
});
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
})
node.append("circle")
.attr("r", 4.5);
node.append("text")
.attr("dx", 3)
.attr("dy", function(d) {
return d.children ? -10 : 10;
})
.attr("text-anchor", function(d) {
return d.children ? "end" : "start";
})
.text(function(d) {
return d.name;
});
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node {
font: 10px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
I'm wondering if it is possible. The data model currently doesn't allow this kind of behavior IMHO, but I don't know a lot of D3, so maybe there is a way around ?
Would like to add an infobox to a d3.js file.
Have studied this SO question, and this SO question, and this SO question, and this fiddle.
Most of the following HTML + JavaScrip + d3.js + JSON file works as planned.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js" charset="utf-8"></script>
<style type="text/css">
.node { cursor: pointer; }
.node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px; }
.node text { font: 10px sans-serif; }
.link { fill: none; stroke: #ccc; stroke-width: 1.5px; }
.link:hover { stroke:blue; }
div#tooltip{ color:#ffffff; background:#000000; opacity:1; padding:5px; }
</style>
<title>Soils with Local JSON</title>
</head>
<body>
<h1>Soils with Local JSON</h1>
<div id="tooltip" style="display:none"></div>
<script type="text/javascript">
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 1000 - margin.right - margin.left,
height = 400 - margin.top - margin.bottom;
var i = 0,
duration = 750,
root;
var tree = d3.layout.tree()
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function (d) {
return [d.y, d.x];
});
//Add tool tip: d3-tip.
var tip = d3.tip()
.attr('class', 'd3-tip')
.html(function(d) { return '' + d.name + '' });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
//Call tool-tip in var svg =
.call(tip);
var root = {
"name":"Soil","children":[
{"name":"Albaqualfs","url":"http://en.wikipedia.org/wiki/Albaqualfs","children":[
{"name":"Aeric Albaqualfs","children":[
{"name":"Auxvasse"},
{"name":"Cayagua"},
{"name":"Mamou"},
{"name":"Marine"},
{"name":"Medoc"},
{"name":"Springfield"},
{"name":"Tenot"}]}]}]};
root.x0 = height / 2;
root.y0 = 0;
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
root.children.forEach(collapse);
update(root);
d3.select(self.frameElement).style("height", "800px");
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function (d) {
d.y = d.depth * 180;
});
// Update the nodes
var node = svg.selectAll("g.node")
.data(nodes, function (d) {
return d.id || (d.id = ++i);
});
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on("click", click);
nodeEnter.append("circle")
.attr("r", 1e-6)
.style("fill", function (d) {
return d._children ? "lightsteelblue" : "#fff";
});
nodeEnter.append("text")
.attr("x", function (d) {
return d.children || d._children ? -10 : 10;
})
.attr("dy", ".35em")
.attr("text-anchor", function (d) {
return d.children || d._children ? "end" : "start";
})
.text(function (d) {
return d.name;
})
.style("fill-opacity", 1e-6)
.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("left", r.left + "px")
.style("position", "absolute")
.text(d.test);
})
.on("mouseout", function(){
d3.select("div#tooltip").style("display", "none")
});
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function (d) {
return "translate(" + d.y + "," + d.x + ")";
});
nodeUpdate.select("circle")
.attr("r", 4.5)
.style("fill", function (d) {
return d._children ? "lightsteelblue" : "#fff";
});
nodeUpdate.select("text")
.style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function (d) {
return "translate(" + source.y + "," + source.x + ")";
})
.remove();
nodeExit.select("circle")
.attr("r", 1e-6);
nodeExit.select("text")
.style("fill-opacity", 1e-6);
// Update the links
var link = svg.selectAll("path.link")
.data(links, function (d) {
return d.target.id;
});
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function (d) {
var o = {
x: source.x0,
y: source.y0
};
return diagonal({
source: o,
target: o
});
});
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function (d) {
var o = {
x: source.x,
y: source.y
};
return diagonal({
source: o,
target: o
});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function (d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
</script>
</body>
</html>
Now would like to add an infobox for an item that displays information like this:
Am currently working with d3-tip.
The included file has a JSON field for "name" and "url". It also includes an attempt to map the "url" to d.url and "name" to d.name.
One issue is the need to keep the infobox temporarily persistent so that users can click the item's URL if they choose. Once the cursor is moved away from the infobox, it should clear.
The target infobox image above shows an X to close the infobox if clicked. However, I don't see how to introduce a second selector - the current selector opens the next level of the tree. Therefore, I'm hoping that a temporarily persistent infobox, revealed on mouseover, can be implemented.
The infobox can overlay the tree data - no need to re-draw the tree to adjust to the placement of the infobox.
How to correct the d3-tip code to work as desired?
If an SO reader uses an alternative to d3-tip that basically accomplishes the same task, that would be good too.
I am new to D3 and I am trying to implement drag behaviour in case of the Collapsible Tree.
The variable d in the following code is showing the error undefined
var drag = d3.behavior.drag()
.on("drag", function(d,i) {
d.x += d3.event.x;
d.x += d3.event.y;
d3.select(this).attr("transform", function(d,i){
return "translate(" + [d.x,d.y ] + ")"
})
});
I tried setting the origin() but it didnt solve the issue
var drag = d3.behavior.drag()
.origin(function() {
var t = d3.select(this);
return {x: t.attr("x"), y: t.attr("y")};
})
.on("drag", function(d,i) {
d.x += d3.event.x;
d.x += d3.event.y;
d3.select(this).attr("transform", function(d,i){
return "translate(" + [d.x,d.y ] + ")"
})
});
I tried by capturing the d3.event.x/y and then transform by that amount but it was offset by an amount......
Can you please let me know where I am getting it wrong?? Any help would me much appreciated....
The complete code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.node {
cursor: pointer;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
.templink {
fill: none;
stroke: red;
stroke-width: 3px;
}
.ghostCircle.show{
display:block;
}
.ghostCircle, .activeDrag .ghostCircle{
display: none;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 120, bottom: 20, left: 120},
width = 1960 - margin.right - margin.left,
height = 800 - margin.top - margin.bottom;
var i = 0,
duration = 750,
root;
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var drag = d3.behavior.drag()
.on("drag", function() {
d3.select(this).attr("transform", function(){
return "translate(" + [ d3.event.x,d3.event.y ] + ")"
})
});
var svg = d3.select("body")
.append("svg:svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("svg:g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.append("svg:g")
.call(drag);
var tree = d3.layout.tree()
.size([height, width]);
d3.json("test_1_final.json", function(error, flare) {
root = flare;
root.x0 = height / 2;
root.y0 = 0;
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
root.children.forEach(collapse);
update(root);
});
//////////////////////////////////////////////////////////////////////////////
// sort the tree according to the node names
function sortTree() {
tree.sort(function(a, b) {
return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1;
});
}
// Sort the tree initially incase the JSON isn't in a sorted order.
sortTree();
////////////////////////////////////////////////////////////////////////////////
// Define the zoom function for the zoomable tree
function zoom() {
svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
// define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents
var zoomListener = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", zoom);
////////////////////////////////////////////////////////////////////////////////
d3.select(self.frameElement).style("height", "800px");
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });
// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click);
nodeEnter.append("circle")
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1e-6);
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
nodeUpdate.select("circle")
.attr("r", 4.5)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeUpdate.select("text")
.style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();
nodeExit.select("circle")
.attr("r", 1e-6);
nodeExit.select("text")
.style("fill-opacity", 1e-6);
// Update the links…
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
});
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
</script>
</bodya
</html>
I need to show HTML div element on mouse over of node in graph generated by d3.js. Main purpose is to show additional information related to node on hover in structured manner. This information contains link, image and text. Below is the code which I have written for generation of graph. It is static graph where user can move nodes within window frame:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.node.fixed {
border: 2px;
border-color: #foo;
}
.link {
stroke: #000;
fill: none;
stroke-width: 2px;
cursor: default;
}
.nodeLabel {
stroke: #000;
stroke-width: 1px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 1000,
height = 850;
var color = d3.scale.category20();
// A map from group ID to image URL.
var imageByGroup = {
"0": "./images/1.png",
"1": "./images/2.png",
"2": "./images/3.png",
"3": "./images/4.png",
"4": "./images/5.png",
"5": "./images/6.png",
"6": "./images/7.png",
"7": "./images/8.png",
"8": "./images/9.png"
};
var force = d3.layout.force()
.charge(-100)
.linkDistance(150)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.call(d3.behavior.zoom().on("zoom", redraw));
// Per-type markers, as they don't inherit styles.
svg.append("svg:defs").append("svg:marker")
.attr("id", 'end-arrow')
.attr("viewBox", "0 -5 10 10")
.attr("refX", 17)
.attr("refY", 0)
.attr("markerWidth", 7)
.attr("markerHeight", 7)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M5,0L0,-5L10,0L0,5L5,0")
.attr('fill', '#000');
d3.json("input.json", function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style('marker-end', 'url(#end-arrow)');
var drag = force.drag()
.on("dragstart", dragstart);
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.call(drag);
node.append("image")
.attr("xlink:href", function(d) {return imageByGroup[d.group];})
.attr("x", -24)
.attr("y", -24)
.attr("width", 48)
.attr("height", 48);
node.append("text")
.attr("text-anchor", "middle")
.attr("dy",35)
.attr("class", "nodeLabel")
.text(function(d) { return d.name; });
node.append("title")
.text(function(d) { return d.id+"--"+d.name; });
node.on("click", function(d){//alert(d.name)
});
force.on("tick", function() {
node.attr("cx", function(d) { return Math.min(width,d.x); })
.attr("cy", function(d) { return Math.min(height,d.y); })
.attr("transform", function(d) { return "translate(" + Math.min(width,d.x)+ "," + Math.min(height,d.y) + ")"; });
link.attr("x1", function(d) { return Math.min(width,d.source.x); })
.attr("y1", function(d) { return Math.min(height,d.source.y); })
.attr("x2", function(d) { return Math.min(width,d.target.x); })
.attr("y2", function(d) { return Math.min(height,d.target.y); });
});
});
function redraw() {
svg.attr("transform", " scale(" + d3.event.scale + ")");
}
function dragstart(d) {
d.fixed = true;
d3.select(this).classed("fixed", true);
}
</script>
Input JSON file is:
{
"nodes":[
{"id":0,"name":"n1","group":0,"x":50,"y":50,"fixed":true},
{"id":1,"name":"n2","group":0,"x":200,"y":140,"fixed":true},
{"id":2,"name":"n3","group":0,"x":200,"y":50,"fixed":true},
{"id":3,"name":"n4","group":0,"x":350,"y":50,"fixed":true}
],
"links":[
{"source":1,"target":3,"value":1},
{"source":0,"target":2,"value":1},
{"source":0,"target":1,"value":1},
{"source":2,"target":3,"value":1}
]
}
Text tooltip is working fine with above code but I need to show more images and links as well in formatted manner as mentioned above.
Also, it would be helpful if you could please let me know if I can change the image of node on hover to make it appear highlighted.
You simply need to bind actions with commands like :
node.on("mouseover", mouseover)
.on("mouseout", mouseout)
Where mouseover and mouseoutare functions where you can get the hovered-on node in the argument :
function mouseover(d) {
// d is the node object
// You can even get mouse position with this command
var mousePos = d3.mouse(this);
}
The book "Interactive Data Visualization" also has a chapter where it is explained how to make a tooltip appear.