I'm trying to implement one of the examples found on the d3.js site in JSFiddle and not having any luck. Here's what I have so far. I'm not really a JS developer (nor have I ever played one on TV), but I'm usually able to get something going with a little persistence and research (often in that order). I'm stumped. What am I doing wrong?
Other than implementing the data block as a variable instead of loading it from a file, I haven't altered the code at all. In the HTML, I took out one line that referred to the dndTree.js, and moved the CSS to the CSS section of JSFiddle.
At line 804, the treeData variable is first referenced:
// Call visit function to establish maxLabelLength
visit(treeData, function (d) {
totalNodes++;
maxLabelLength = Math.max(d.name.length, maxLabelLength);
}, function (d) {
return d.children && d.children.length > 0 ? d.children : null;
});
Related
So...I've been setting up a brand-new wiki for the past four days. While everything's going almost smoothly, I'd like to deal with a special touchup.
I created a preload template à la Wikipedia, "Template starter", some hours ago. While I could go the other way and create an input form, I want to make it so that red links in the Template namespace always lead to the code from this page, whenever a new one is ready for creation. So that:
http://rfm.referata.com/w/index.php?title=Template:Foo&action=edit&redlink=1 (default)
becomes:
http://rfm.referata.com/w/index.php?title=Template:Foo&action=edit&redlink=1&preload=Template:Template+starter (target)
by way of a JavaScript snippet added to the site's Common.js and Mobile.js.
Haven't come across similar MW-based examples, so I'd like to make sure everything's A-O.K.
Working from this answer, you could do something like this in Mediawiki:Common.js:
$(function() {
var preload = 'Template:Template_starter';
$("body.ns-10 #mw-content-text a.new").attr('href', function(i, h) {
// Maybe some links already have a preload parameter.
if (h.indexOf('preload=') !== -1) {
return h;
}
// All others get it appended.
return h + "&preload=" + preload;
});
});
Note that the check for a pre-existing '&preload=' isn't all that robust.
This extension should work well in your case https://www.mediawiki.org/wiki/Extension:NewArticleTemplate
Improving on what you provided last time, Mr. Wilson:
$(function() {
var preload = 'Template:Template_starter';
$("a.new[href*='Template:']").attr('href', function(i, h) {
// Maybe some links already have a preload parameter.
if (h.indexOf('preload=') !== -1) {
return h;
}
// All others get it appended.
return h + "&preload=" + preload;
});
});
Note that the previous version only worked within pages in the Template namespace; this fix applies to all pages with a red link to a nonexistent template. Thanks a dozen!
This is a followup on this question:
D3 Dynamic hierarchical edge bundling - 2 way import
The original problem was resolved and is shown in http://jsfiddle.net/w2rfwokx/1/
i.e there is an orange link in case node 1 and node 2 both import each other. But there seems to be an issue with this resolution, which becomes apparent in this new data set shown in http://jsfiddle.net/w2rfwokx/3/
When node 1 and node 2 both import each other, and when node 1 is highlighted, node 2 is in orange, which is how it needs to be, but the link is not.
I guess the code is not taking into account the complex data set. In this complex data set, node 1 imports node 2, node 2 imports node 1 and node 3, node 3 imports node 2.
I can figure out that construction of unique links array in this code block needs change
var unique_links = links.reduce(function(p,c) {
var index=p.map(function(d,i) { if(d.source===c.target && d.target===c.source) return i;}).shift();
if(!isNaN(index)) p[index].both=true; else p.push(c);
return p;
},[]);
Though i am struggling to see what change. I am still learning d3.js and my primary purpose is application of this to process management
Any pointers would be helpful
The links were not properly marked as "both"-directional.
This code segment is incorrect:
d.both = unique_links.filter(function(v) { if (v.source===d.source && v.target===d.target) return v.both; }).shift();
})
It should look like this:
d.both = unique_links.filter(function (v) {
if (v.source === d.target && v.target === d.source){
return v.both = d.both = true;
}
})
This is jsfiddle. And demo screen animation:
what I'm trying to do is d3.nest() one csv into another.
The node list looks like this:
id,movie,year,genre
85442,Hamlet,1907,Drama
57421,Don Quijote,1908,Drama
13146,Amleto [I],1908,Drama
85443,Hamlet,1908,Drama
160468,Othello,1909,Drama
160468,Othello,1909,Romance
And the edges or links look like this:
sourceid,targetid
234,99455
234,125817
234,201681
476,72885
476,188536
476,246634
1028,14948
1028,60050
So I would like to nest the edges into the node list by the given IDs.
I'm doing some unclever nesting that doesn't work that looks like this right now:
d3.csv("edges.csv", function(edges){
d3.csv("nodes.csv", function(nodes){
var nested_data = d3.nest()
.key(function(d) { return d.sourceid; })
.key(function(d) { return d.id; })
.entries(edges)
.entries(nodes);
console.debug(nested_data);
});
});
I searched for help and found this: D3 change elements based on two different datasets?
But I can't get my head around it. Is it really so difficult? Or might there be another way of doing this? I found this visualization (http://mbostock.github.io/d3/talk/20111116/airports.html) which also deals with two csv files and network structures without using nest().
Thanks,
Kim
Because many people looked at this question, I thought of writing a short follow-up on how this can be solved, to my understanding now.
Lars already gave the right hints. So here just a coded version.
d3.csv("edges.csv", function(edges){
d3.csv("nodes.csv", function(nodes){
var newlist = [];
var i = edges.length;
while(i--){
var edge = edges[i];
newlist.push(
nodes[edge.sourceid].x),
nodes[edge.targetid].y)
);
}
var nested_data = d3.nest()
.key(function(d) { return ... })
.entries(newlist);
});
});
It's not fitting the question perfectly because it assumes that the nodes list is ordered by the ids. The two lists above could be itterated over with something like http://underscorejs.org/#find
Hope this helps.
I need to provide "renaming" functionality to rename nodes using the Icicle example (http://bl.ocks.org/mbostock/4347473).
I am not able to find any solutions similar to what I would like to do, and as browsers usually do not allow for right click, I was wondering if anyone has any suggestions on how to allow for this option and then also how to go about allowing someone to be able to rename a specific node's name.
Thanks.
For the record and per kind request by user2651192, the most workable path for this that we could find is here and, more specifically, the code to change the text is:
...
node.append("text")
.text(function(d){ return d.name; })
.on('click', function(d){
var result = prompt('Change the name of the node',d.name);
if(result) {
d.name = result;
var node1 = canvas.selectAll('.node').data(nodes);
node1.select('text')
.text(function(d){ return d.name; });
}
)};
...
I previously asked a similar question before, however it seemed that I wasn't being precise enough about my question - hopefully this is.
Many examples of the Tree Layout format their hierarchy data set as this: https://gist.github.com/tchaymore/1249394#file-math_map_compact-json
However I wanted to change the "children" node in the json to "children1" for example
var flare = {
"Name": "Example",
"children1": [
{
"BName":"Ja",
"Email":"",
"children1":[
{
"NickName":"NC",
"id":2
}
],
}
]};
When I had changed the name of that node, I then used the children function:
var tree = d3.layout.tree()
.size([height, width])
.children(function(d) { return d.children1; });
After that I changed all of the "children" references to "children1" & so on.
However, now I have the problem of not being able to collapse the tree back into its parent. I've tried to use this example as a reference, but no luck: http://blog.pixelingene.com/2011/07/building-a-tree-diagram-in-d3-js/
Here's a example of my current problem: http://jsfiddle.net/mEyQW/1/
.. I apologize for the previous confusion
I don't really get what you wanted to do with your collapse() function and the _children1 but if you remove it, then everything works fine:
jsFiddle: http://jsfiddle.net/chrisJamesC/mEyQW/2/