JeffH
unread,Nov 18, 2011, 3:12:34 PM11/18/11Sign in to reply to author
Sign in to forward
You do not have permission to delete messages in this group
Sign in to report message
Either email addresses are anonymous for this group or you need the view member email addresses permission to view the original message
to d3-js
Hi all,
I've been trying to change the color of a link and its arrowhead when
the user clicks on my force graph. So far, I've been successful in
changing the link line but can't figure out how to change the
arrowhead. This is the line in the code below that I thought might
work but doesn't:
d3.select(this.arrowhead).style("fill","red");
Any ideas would be most appreciated!
Thanks,
Jeff
var link = vis.selectAll("line.link")
.data(json.links)
.enter().append("svg:line")
.attr("class", "link")
.style("stroke-width", function(d) { return
Math.sqrt(d.value); })
.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; })
.attr("marker-end", "url(#arrowhead)")
.on("click", function(d) {
link.style("stroke","gray");
d3.select(this).style("stroke","red");
d3.select(this).style("fill","red");
d3.select(this.marker).style("fill","red");
clickLink(d);
});
defs.append("svg:marker")
.attr("id", "arrowhead")
.attr("viewBox","0 0 10 10")
.attr("refX","20")
.attr("refY","5")
.attr("markerUnits","strokeWidth")
.attr("markerWidth","9")
.attr("markerHeight","5")
.attr("orient","auto")
.append("svg:path")
.attr("d","M 0 0 L 10 5 L 0 10 z")
.attr("fill", "#BBBBBB");