Question: Can someone explain what is happening here?
The var root is set where it calls a function (classes), but when that function is defined it is passing in the root object. This is what I don't understand.
Some extra details:
Because of the words I would enter into a search engine, I can't find exactly what I'm looking for. Just giving me the name of what this is called is what I'm looking for, so I can further research it.
I have just learned about recursion.
This code is not mine, it's from here. It is running fine on my local server.
<center></center>
<script>
var diameter = 960,
format = d3.format(",d"),
color = d3.scaleOrdinal(d3.schemeCategory20c);
var bubble = d3.pack()
.size([diameter, diameter])
.padding(1.5);
var svg = d3.select("center").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
d3.json("flare.json", function(error, data) {
if (error) throw error;
var root = d3.hierarchy(classes(data))
.sum(function(d) { return d.value; })
.sort(function(a, b) { return b.value - a.value; });
bubble(root);
var node = svg.selectAll(".node")
.data(root.children)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("title")
.text(function(d) { return d.data.className + ": " + format(d.value); });
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) {
return color(d.data.packageName);
});
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.data.className.substring(0, d.r / 3); });
});
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
var classes = [];
function recurse(name, node) {
if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
else classes.push({packageName: name, className: node.name, value: node.size});
console.log([classes]);
}
recurse(null, root);
return {children: classes};
}
d3.select(self.frameElement).style("height", diameter + "px");
</script>
The var root is set where it calls a function (classes), but when that function is defined it is passing in the root object.
No, it simply has a parameter that is named root. This has nothing to do with the root variable outside of the function.
You could rename the function parameter for example foobar (function classes(foobar), and inside recurse(null, foobar);), and things would still work exactly the same.
Your confusion is completely understandable, considering there are two uses of root, and they don't refer to the same thing.
Note that classes is invoked by classes(data), so the root in the classes function refers to the data loaded in flare.json, while the root in your data loading function is a d3 object, returned by d3.hierarchy.
I would recommend renaming the root parameter in classes so there's less confusion.
Related
I'm trying to figure out why my tweening numbers (counting up or down) code in Version 4 of D3 doesn't function any more.
Here is my code:
var pieText = svg4.append("text")
.attr("class", "pieLabel")
.attr("x", 0)
.attr("y", 0)
.text(0)
.attr("dy", "0.2em")
.style("font-size", 19)
.style("fill", "#46596b")
.attr("text-anchor", "middle");
d3.selectAll(".pieLabel").transition()
.delay(500)
.duration(1000)
.tween("text", function(d) {
var i = d3.interpolate(this.textContent, d.value);
return function(t) {
this.textContent = form(i(t));
};
});
The console.log tells me that the interpolation works fine.
So what has changed? And how do I get it to work?
Thanks for your help.
The problem here is just this inside the inner function, which will no longer work as it worked in v3.
Let's prove it. Have a look at the console here, using D3 v3, this is the DOM element:
d3.select("p").transition()
.tween("foo", function(d) {
var i = d3.interpolate(0, 1);
return function(t) {
console.log(this)
};
});
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<p></p>
Now the same snippet, using D3 v4... this is now the window object:
d3.select("p").transition()
.tween("foo", function(d) {
var i = d3.interpolate(0, 1);
return function(t) {
console.log(this)
};
});
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<p></p>
Solution: keep the reference to this in the outer function as a variable (traditionally named self, but here I'll name it node):
d3.selectAll(".pieLabel").transition()
.delay(500)
.duration(1000)
.tween("text", function(d) {
var node = this;
//keep a reference to 'this'
var i = d3.interpolate(node.textContent, d.value);
return function(t) {
node.textContent = form(i(t));
//use that reference in the inner function
};
});
Here is your code with that change only:
var widthpie = 250,
heightpie = 300,
radius = Math.min(widthpie, heightpie) / 2;
var data = [{
antwort: "A",
value: 0.5
}, {
antwort: "B",
value: 0.4
}];
var form = d3.format(",%");
var body4 = d3.select("#chart1");
var svg4 = body4.selectAll("svg.Pie")
.data(data)
.enter()
.append("svg")
.attr("width", widthpie)
.attr("height", heightpie)
.append("g")
.attr("transform", "translate(" + widthpie / 2 + "," + heightpie / 2 + ")");
var pieText = svg4.append("text")
.attr("class", "pieLabel")
.attr("x", 0)
.attr("y", 0)
.text(0)
.attr("dy", "0.2em")
.style("font-size", 19)
.style("fill", "#46596b")
.attr("text-anchor", "middle");
d3.selectAll(".pieLabel").transition()
.delay(500)
.duration(1000)
.tween("text", function(d) {
var node = this;
var i = d3.interpolate(node.textContent, d.value);
return function(t) {
node.textContent = form(i(t));
};
});
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="chart1"></div>
PS: I'm using Firebug in the snippets because S.O. snippet don't log the window object correctly.
The problem is caused by a change which is not documented in the changelog. D3 v3 calls the inner function returned by the callback passed to transition.tween() on every tick passing the current node as the this context:
tweens[--n].call(node, e);
As of v4, however, this is no longer the case when the inner function is called:
tween[i].call(null, t);
Passing null to that function will be replaced with the global object. In this case this in your function no longer points to current element as was true for v3. The remedy was already been laid out by Gerardo in his answer and is even suggested by the documentation on v4:
transition.tween("attr.fill", function() {
var node = this, i = d3.interpolateRgb(node.getAttribute("fill"), "blue");
return function(t) {
node.setAttribute("fill", i(t));
};
});
Hence, you need a closure to keep a reference to the current element as it is referenced as this in the callback provided to transition.tween().
i thing i copy this code i dont know where, if any one knew just give referance. i use this to add transition to path, i hope this give you an idea
Use this to append the transition
.transition()
.duration(2000)
.attrTween("stroke-dasharray", tweenDash)
this the function
function tweenDash() {
return function(t) {
var l = path.node().getTotalLength();
interpolate = d3.interpolateString("0," + l, l + "," + l);
//t is fraction of time 0-1 since transition began
var p = path.node().getPointAtLength(t * l);
return interpolate(t);
}
}
first I have made this Web API from where I am getting tree structure object.
private TreeService _studentServices = new TreeService();
private static List<TreeNode> FillRecursive(ICollection<SalaryDetail> flatObjects, int? Refid = null)
{
return flatObjects.Where(x => x.Refid.Equals(Refid)).Select(item => new TreeNode
{
Name = item.Name,
Id = item.Id,
Salary = item.Salary,
Refid = item.Refid,
Children = FillRecursive(flatObjects, item.Id)
}).ToList();
}
// GET api/values
public List<TreeNode> Get()
{
ICollection<SalaryDetail> salarydetails = _studentServices.GetAllSalaryDetails();
var tree = FillRecursive(salarydetails, null);
return tree;
}
then I called This API in D3 as given below to show the data as a D3.js circle packing graph.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/d3js/3.5.16/d3.js"></script>
<script>
var diameter = 700,
format = d3.format(",d");
var pack = d3.layout.pack()
.size([diameter - 4, diameter - 4])
.value(function (d) { return d.salary; });
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(2,2)");
d3.json("http://localhost:56935/api/values", function (error, root) {
var node = svg.datum(root).selectAll(".node")
.data(pack.nodes)
.enter().append("g")
.attr("class", function (d) { return d.children ? "node" : "leaf node"; })
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
node.append("title")
.text(function (d) { return d.name + (d.children ? "" : ": " + format(d.salary)); });
node.append("circle")
.attr("r", function (d) { return d.r; });
node.filter(function (d) { return !d.children; }).append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function (d) { return d.name.substring(0, d.r / 3); })
.style("font-size", 20);
});
d3.select(self.frameElement).style("height", diameter + "px");
</script>
</head>
<body>
</body>
Although I am getting data through D3.json() function but not my circle packing graph, Not even getting single error. Please help me out to make these graph. where am I lacking.
The structure of the json returning by Web Api is given below
[{"Id":1,"Name":"James","Salary":null,"Refid":null,"Children":[{"Id":2,"Name":"David","Salary":null,"Refid":1,"Children":[{"Id":3,"Name":"Richard","Salary":null,"Refid":2,"Children":[{"Id":4,"Name":"John","Salary":1000,"Refid":3,"Children":[]},{"Id":5,"Name":"Robert","Salary":4000,"Refid":3,"Children":[]},{"Id":6,"Name":"Paul","Salary":6000,"Refid":3,"Children":[]}]},{"Id":7,"Name":"Kevin","Salary":null,"Refid":2,"Children":[{"Id":8,"Name":"Jason","Salary":5000,"Refid":7,"Children":[]},{"Id":9,"Name":"Mark","Salary":null,"Refid":7,"Children":[{"Id":10,"Name":"Thomas","Salary":1000,"Refid":9,"Children":[]},{"Id":11,"Name":"Donald","Salary":1000,"Refid":9,"Children":[]}]}]}]}]}]
1. Instead of returning a List at your endpoint, return an object (the first element from your current returning list). From D3 docs for pack layout:
the input argument to the layout is the root node of the hierarchy
2. Either rename the Children -> children property name (by default D3 expects hierarchical data to be under children key), or define a different key for your data like this:
var pack = d3.layout.pack()
.size([diameter - 4, diameter - 4])
.value(function (d) { return d.Salary; }) // Note that according to your data structure, your `Salary` should start with a capital letter.
.children(function (d) { return d.Children; }); // Define how to obtain children data.
d3.js tree layout is a great tool, but it only allows children to have a single parent by default. I would like to be able to let children have more than one parent. I am happy with the position of the nodes provided by the tree's default behaviour. All I want is to draw extra diagonal links between childless parents and existing children after the default tree has been calculated.
My script currently looks like this :
<script>
var h = 870,
w = 1200;
var dimcirc = [60,30,10,8];
var offsetL = 60;
var couleurs = [
"#a2a2ff",
"#87ff87",
"#ffc55c",
"#ff844d",
"#ffe452"];
var tree = d3.layout.tree()
.size([h-100, w-400])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 1.2); });
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y + offsetL, d.x]; });
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h)
.append("g");
d3.json("donnees.json", function(error, root) {
if (error) throw error;
var nodes = tree.nodes(root),
links = tree.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", function(d){return "niv_" + d.depth.toString();})
.classed("node", true)
.attr("transform", function(d) { return "translate(" + (d.y + offsetL).toString() + "," + d.x +")"; })
// Draw node circles
node.append("circle")
.attr("fill", function(d){
console.log(d.couleur);
if(d.couleur!=null){
return couleurs[d.couleur];
}
else {return couleurs[4];}
})
.attr("r", function(d){
return dimcirc[d.depth];
});
node.append("text")
.attr("dy", "0.31em")
//.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.attr("transform", function(d){
return "translate(" + (dimcirc[d.depth] + 10).toString() + ")"
})
.text(function(d) { return d.name; })
.call(wrap, 230);
});
// Wrap text
function wrap(text, width) {
// A function to help wrap svg text.
}
</script>
I have tried to copy the children of a parent node to a childless node using the root object, to no avail (the structure of the root object is quite obscure to me).
Any help appreciated.
PS : I am aware of a similar question (d3.js tree nodes with same parents), but the lack of answers didn't help me much or course.
EDIT
I've managed to get what I want by :
1) Identifying the nodes of interest : those without children that are to be connected to existing children, and the parent of the later.
2) Extracting the coordinates of the source (node without children) and target (children to be connected to this node) from the root object.
3) Creating the extra paths using the same diagonal as for the "standard" paths created by the tree.
Here's the code I've added to get the source and target for each path :
var link2 = [];
var loopLink2 = [{"a":0,"b":1, "c":0,"d":0},{"a":1,"b":1, "c":1,"d":0},{"a":3,"b":0, "c":2,"d":1}];
loopLink2.forEach(function(d){
var sourX = root.children[d.a].children[d.b].x;
var sourY = root.children[d.a].children[d.b].y;
root.children[d.c].children[d.d].children.forEach(function(d){
link2.push({"source":{"x":sourX,"y":sourY}, "target":{"x":d.x,"y":d.y}});
console.log(link2);
});
});
And here's where the actual creation of the paths takes place :
svg.selectAll(".link2")
.data(link2)
.enter().append("path")
.attr("class", "link2")
.attr("d", diagonal)
.attr("transform", function(d) { return "translate(0," + offsetT +")"; });
Someone has a nicer solution ?
I don't know whether this is exactly what you are looking for. But this might help.
Dagre
Dagre is a library that uses d3 to plot acyclic graphs. You can try modifying this. Here
is the github wiki.
Family Tree
Here you can find an excellent answer for creating a family tree , that can have multiple parents for one child. This might fulfill your requirement if the structure doesn't matter.
I have been trying for long to make this : http://bl.ocks.org/mbostock/4063269#flare.json example work in my sample Rails app to learn about d3.js. But, I am getting hard time to make it work.
I put the following code in my index.html.erb file :
<script type="text/javascript">
var diameter = 960,
format = d3.format(",d"),
color = d3.scale.category20c();
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(1.5);
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
d3.json("assets/data/flare.json", function(error, root) {
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(root))
.filter(function(d) { return !d.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("title")
.text(function(d) { return d.className + ": " + format(d.value); });
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.packageName); });
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.className.substring(0, d.r / 3); });
});
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
var classes = [];
function recurse(name, node) {
if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
else classes.push({packageName: name, className: node.name, value: node.size});
}
recurse(null, root);
return {children: classes};
}
d3.select(self.frameElement).style("height", diameter + "px");
</script>
I put the flare.json file inside my app/assets/data directory. But, it seems like the javascript can not load the flare.json file from that location. I am just not sure how to make this work :( How to specify the location of the json file so that the javascript can load it and the code works? Any suggestion would be much much helpful.
Instead of loading the json file via d3.json, I rendered its contents on the javascript file and used a variable to store it.
var root = <%= render partial: 'controller_view/flare.json', formats: [:json] %>;
I am trying to wrap my mind around d3's pack layout (http://bl.ocks.org/4063530).
I have the basic layout working but I would like to update it with new data. i.e. collect new data, bind it to the current layout.pack and update accordingly (update/exit/enter).
My attempts are here (http://jsfiddle.net/emepyc/n4xk8/14/):
var bPack = function(vis) {
var pack = d3.layout.pack()
.size([400,400])
.value(function(d) {return d.time});
var node = vis.data([data])
.selectAll("g.node")
.data(pack.nodes)
.enter()
.append("g")
.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("circle")
.attr("r", function(d) { return d.r });
node.filter(function(d) { return !d.children; }).append("text")
.attr("text-anchor", "middle")
.attr("dy", ".3em")
.text(function(d) { return d.analysis_id });
bPack.update = function(new_data) {
console.log("UPDATE");
node
.data([new_data])
.selectAll("g.node")
.data(pack.nodes);
node
.transition()
.duration(1000)
.attr("class", function(d) { return d.children ? "node" : "leaf node" })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")" });
node.selectAll("circle")
.data(new_data)
.transition()
.duration(1000)
.attr("r", function(d) { return d.r; });
};
Specific questions...
How do I bind the data? (since the data is not complex structure and not an array of data)
How can new nodes/leafs be added to the layout? And old ones removed?
Pointers to a working example would be greatly appreciated.
Working example is here.
Basically, there is code for initial load, where all circles, tooltips, etc. are created and positioned in initial places. As well, the layout (pack) is created.
Than, on each button press, new data is loaded into pack, and the pack is recalculated. That crucial code is here:
Here you bind (load) now data into pack layout: (in my example its random data, of course you'll have your data from json or code or similar):
pack.value(function(d) { return 1 +
Math.floor(Math.random()*501); });
Here the new layout is calculated:
pack.nodes(data);
After that, elements are transitioned to new positions, and its attributes are changed as you determine.
I just want to stress that I don't use enter/update/exit pattern or transformations (that you might see in others solutions), since I believe this introduces unnecessary complexity for examples like this.
Here are some pics with transition in action:
Start:
Transition:
End:
I had the same problem recently, and came across the General Update Pattern tutorials as well. These did not serve my purpose. I had a few hundred DOM elements in a graph (ForceLayout), and I was receiving REST data back with properties for each individual node. Refreshing by rebinding data led to reconstruction of the entire graph, as you said in response to mg1075's suggestion. It tooks minutes to finish updating the DOM in my case.
I ended up assign unique ids to elements that need updating later, and I cherry picked them with JQuery. My entire graph setup uses D3, but then my updates don't. This feels bad, but it works just fine. Instead of taking minutes from destroying and recreating most of my DOM, it takes something like 3 seconds (leaving out timing for REST calls). I don't see a reason that something like property updates could not be made possible in D3.
Perhaps if Mike Bostock added a remove() or proper subselection function to the enter() selection, we could follow a pure D3 pattern to do updates. While figuring this out I was trying to bind a subset of data, the data with the new properties added, and then subselecting to get at elements that need updating, but it didn't work, due to the limited and specific nature of the enter() selection.
Of relevance, if you have not already reviewed:
http://bl.ocks.org/3808218 - General Update Pattern, I
http://bl.ocks.org/3808221 - General Update Pattern, II
http://bl.ocks.org/3808234 - General Update Pattern, III
This sample fiddle has no transitions, but here is at least one approach for updating the data.
http://jsfiddle.net/jmKH6/
// VISUALIZATION
var svg = d3.select("#kk")
.append("svg")
.attr("width", 500)
.attr("height", 600)
.attr("class", "pack");
var g = svg.append("g")
.attr("transform", "translate(2,2)");
var pack = d3.layout.pack()
.size([400,400])
.value(function(d) {return d.time});
function update(data) {
var nodeStringLenth = d3.selectAll("g.node").toString().length;
if ( nodeStringLenth > 0) {
d3.selectAll("g.node")
.remove();
}
var node = g.data([data]).selectAll("g.node")
.data(pack.nodes);
node.enter()
.append("g")
.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("circle")
.attr("r", function(d) { return d.r });
node.filter(function(d) { return !d.children; }).append("text")
.attr("text-anchor", "middle")
.attr("dy", ".3em")
.text(function(d) { return d.analysis_id });
node
.exit()
.remove();
}
var myData = [data1, data2, data3];
update(data1);
setInterval(function() {
update( myData[Math.floor(Math.random() * myData.length)] ); // http://stackoverflow.com/questions/4550505/getting-random-value-from-an-array?lq=1
}, 1500);