d3.js, click to link to another URL encoded with variables - javascript

I made a scatter plot, and want to add a link to each dot.
chart.selectAll("scatter-dots")
.data(data)
.enter().append("circle")
.attr("cx", function (d) { return x(d.position[0]); } )
.attr("cy", function (d) { return y(d.position[1]); } )
.attr("r", 4)
.style("fill", "#666")
.style("opacity", 0.5)
.on("click", function(){
var url = "http://somelink.com/link.php?id=";
url += d.link_id;
//$(location).attr('href', url);
//window.location = url;
});
It works if I just put the pure String link such as
window.location = "http://stackoverflow.com"
However, if I add queries to the end of the URL from a variable, the page does not redirected.
Neither jquery nor javascript worked (as commented.)
I also tried an external js file, still fail.
This is in a PHP file, if this helps.

If it works with a static string then something is wrong with d.link_id. Try seeing what's inside either by doing alert(d.link_id) or if you use a firebug or similars do console.log(d.link_id).
Alternatively, you should use real anchors for linking your nodes instead of setting click events. This would go something like...
chart.selectAll("scatter-dots")
.data(data)
.enter()
.append("a")
.attr("xlink:href", function(d) {return "http://somelink.com/link.php?id=" + d.link_id})
.append("circle")
.attr("cx", function (d) { return x(d.position[0]); } )
.attr("cy", function (d) { return y(d.position[1]); } )
.attr("r", 4)
.style("fill", "#666")
.style("opacity", 0.5)
(I can't seem to recall if this is the exact way of doing it, you might need to save the anchors in a variable and then append the circles to them.)

Related

Place text inside a circle. d3.js

I am trying to modify a code, and in the modifications that I have made, I have not been able to put a text in the middle of a circle. I've tried many things, and I've seen several examples but it does not work for me. How can I do it?
I know it should be done in this piece, and I add a text tag but it does not work.
bubbles.enter().append('circle')
.classed('bubble', true)
.attr('r', 0)
.attr('fill', function (d) { return fillColor(d.group); })
.attr('stroke', function (d) { return d3.rgb(fillColor(d.group)).darker();
})
.attr('stroke-width', 2)
.on('mouseover', function(){})
.on('mouseout', function(){});
http://plnkr.co/edit/2BCVxQ5n07Rd9GYIOz1c?p=preview
Create another selection for the texts:
var bubblesText = svg.selectAll('.bubbleText')
.data(nodes, function(d) {
return d.id;
});
bubblesText.enter().append('text')
.attr("text-anchor", "middle")
.classed('bubble', true)
.text(function(d) {
return d.name
})
And move them inside the tick function.
Here is the updated plunker: http://plnkr.co/edit/UgDjqNhzbvukTWU6J9Oy?p=preview
PS: This is a very generic answer, just showing you how to display the texts. This answer doesn't deal with details like size or transitions, which are out of the scope of the question and that you'll have to implement yourself.

Remove path on double click d3

I have the following code to append a line on an SVG canvas. I am able to get the scope run when I double click on the path as the alert box pops up but the line itself doesn't gets removed. Where am I going wrong? Am I using this incorrectly?
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("step");
lineGraph = layer.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("fill", "none")
.attr("id","aggregation")
.attr("data", "newline")
.style('marker-end', "url(#end-arrow)")
.on("dblclick",function(d){
alert("double");
d3.this.remove();
});
The method .remove() needs to be called on a D3 selection. In an event handler you can obtain the selection containing the element which was target of the event by doing
d3.select(this)
Thus, changing your handler to
.on("dblclick",function(d){
d3.select(this).remove();
});
should do the trick.

D3js - Force Layout. Selecting Specific Node

I am trying to select a specific node and do some animation on it.
This is how I try to select it:
var selectedToEnlarge = node.filter(function (d, i) {
return d.name == selectedVal;
});
This variable actually return an array containing my node. Please see attached image:
The node returned is the one I need.
Now I try to animate it a bit, like this:
selectedToEnlarge.transition().duration(2000)
.attr("stroke-width", 20)
.attr("r", 10)
.transition()
.duration(2000)
.attr('stroke-width', 0.5)
.attr("r", 200)
.ease('sine')
But nothing is happening. I am assuming it is something with selectors.
Any insight is appreaciated :)

Link to Rails partial in D3.js circles?

In my Rails app I have D3.js circles that are created dynamically from data in my Rails app. I'd like to hyperlink the circles so when you click on one, it loads a partial associated to the model that the circle is visualizing.
Here's my D3 code:
d3JSON = function(){
d3.json("/folders/<%= #folder.id %>.json", function(error, data) {
if (error) return console.warn(error);
var folderChildren = [],
circle;
var svg = d3.select("body").selectAll("svg");
circle = svg.selectAll("circle")
.data(data.submissions, String);
circle.enter().append("svg:a")
.attr("xlink:href", function(d){
return "http://localhost:3000/submissions/" + d.id;
})
.append("circle")
.attr("cy", function(d) {return d.content.length * 5 + "px";})
.attr("class", "floating")
.attr("cx", function(d){
return (d.content.length / 2) * 10 + "px";
})
.attr("r", function(d){ return (d.content.length / 2) * 1.2;});
circle.exit().remove();
});
};
Everything works great except for when the the circle enter's and has an a attribute appended. As you can see, right now I have the circle just linking directly to the submission model associated to it. I've tried using this:
circle.enter().append("svg:a")
.attr("xlink:href", function(d){
return "<%= link_to submission_path(" + d + "), remote: true %>";
})
But that fails to work. Also replacing "d" with "d.id" doesn't work. Any ideas? I'm new to D3.
What you are trying to do is writing Ruby in JavaScript strings, which obviously wouldn't work.
You can simply put these links in the json.

adding labels to node in d3.js

I am a newbie in d3.js
I am trying to add labels to my nodes.
But whatever I tried is not working..
My code is here:
http://jsfiddle.net/Ymtg5/1/
Its a mash up between http://bl.ocks.org/christophermanning/4208494
and force directed graphs.
Basically I am reading a json file and creating the said graph.
Now I want to add labels to node exactly like http://bl.ocks.org/mbostock/950642
I tried adding these lines
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
But its not working.
Any help. suggestions..
Thanks
Most probably the problem is that your JSON classes don't have a "name".
Right, this was not the problem
The relevant part of your code is as follows:
var node = svg.selectAll("path.node")
.data(nodes)
.enter().append("path").attr("class", "node")
.style("fill", function(d) { return fill(d.value); })
.style("stroke", function(d) { return d3.rgb(fill(d.value)).darker(); })
.call(force.drag);
// HERE should go node manipulation to add the text
force
.nodes(nodes)
.links(links)
.on("tick", tick)
.start();
function tick() {
//node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; );
node.attr("d", function(d) { return clip({"type":"F {"type":"Point","coordin...
link.attr("d", function(d) { return clip({"type":"Feature","geometry":{ ...
I have inserted a comment line where your node manipulation should go, if you want to add labels to the nodes. You are doing that inside the tick function (well, I think you are trying to do it there, the code isn't in the fiddle), and that function should be only for manipulation of the attr of the nodes. The place to create the text and append it to the node is outside of the function.

Categories