D3 tree layout style settings only work when hard coded
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Trying to use data to set the stroke width and color.

function renderLinks(nodes, source) {
var link = _bodyG.selectAll("path.link")
.data(_tree.links(nodes), function (d) {
return d.target.id; });


link.enter().insert("svg:path", "g")
.attr("class", "link")
.style("stroke-width",function(d){ return 5;})
WORKS{ return d.w ;})does not

.style("stroke",function(d){ return "red" ;}) WORKS { return d.h ;})does not

.attr("d", function (d) {
var o = {x: source.x0, y: source.y0};
return _diagonal({source: o, target: o});});


link.transition()
.attr("d", _diagonal);
link.exit().transition()
.attr("d", function (d) {
var o = {x: source.x, y: source.y};
return _diagonal({source: o, target: o});
})
.remove();}


[source][http://pastebin.com/YTrDtDSu]
[ptestx JSON][http://pastebin.com/JPByW9DN]

there are 3 JSON files used, this the only one needed for testing.

Can you post the complete code?
tomtoump over 4 years ago
Trying to copy it all in (377 line), its removing lf/ws. Ill try again later today.
broadreach over 4 years ago
You could try http://pastebin.com
tomtoump over 4 years ago
Thanks!!!!
broadreach over 4 years ago
And the json?
tomtoump over 4 years ago
added, thanks, these other ones aren't needed for testing. Both tree maps now point to ptestx2 for testing.
broadreach over 4 years ago
awarded to dekkard

Crowdsource coding tasks.

1 Solution

Winning solution
Tipped

Hi,

here's the fixed code: http://pastebin.com/g6JmMB9b

Note the lines 231, 232.

Also, you need to change your JSON a bit: http://pastebin.com/Kd9smUq2

Here I added the "stroke" entries for the parent nodes (those which have children).
Also, did a small fix:

"type" : "back"  --> "type" : "black"
Thank you!! and thanks for taking the time to go through all my crappy code.
broadreach over 4 years ago
Not at all. Glad to help you out ;)
dekkard over 4 years ago
View Timeline