3
rated 0 times
[
5]
[
2]
/ answers: 1 / hits: 30593
/ 10 Years ago, fri, september 19, 2014, 12:00:00
I have a question very similar to this one regarding dynamically setting the stroke-width attribute on a path. The solution offered was to pass the results of a function to the stroke-width attr for each path, which makes perfect sense but I cannot manage to get this to work.
Here is the statement that has me stumped:
.attr(stroke-width, function(d) { return (d.interest * 50); })
(The above works just fine and sets the path attr if a substitute an number like 5 for the function.)
Here is the full code:
<!doctype html></html>
<meta charset=utf-8 />
<style>
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node {
font: 16px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
}
</style>
<script type=text/javascript src=http://d3js.org/d3.v3.min.js></script>
<script type=text/javascript>
var width = 800;
var height = 500;
var cluster = d3.layout.cluster()
.size([height, width-200]);
var diagonal = d3.svg.diagonal()
.projection (function(d) { return [d.y, d.x];});
var svg = d3.select(body).append(svg)
.attr(width,width)
.attr(height,height)
.append(g)
.attr(transform,translate(100,0));
d3.json(data.json, function(error, root){
var nodes = cluster.nodes(root);
var links = cluster.links(nodes);
var link = svg.selectAll(.link)
.data(links)
.enter().append(path)
.attr(class,link)
.attr(stroke-width, function(d) { return (d.interest * 50); })
.attr(d, diagonal);
var node = svg.selectAll(.node)
.data(nodes)
.enter().append(g)
.attr(class,node)
.attr(transform, function(d) { return translate( + d.y + , + d.x + ); })
node.append(circle)
.attr(r, function(d) { return d.interest * 50 ;});
node.append(text)
.attr(dx, function(d) { return (d.interest * 50) ;})
.attr(dy, function(d) { return -(d.interest * 50) ;})
.style(text-anchor, function(d) { return d.children ? end : start; })
.text( function(d){ return d.name + (+ d.interest*100 + %);});
});
</script>
And here is sample JSON:
{
name: Root,
date: 1950,
interest: 1.0,
children: [
{
name: Anne,
date: 1970,
interest: 0.5,
children: [
{
name: Charles,
date: 1988,
interest: 0.25,
children: [
{
name: Frank,
date: 2010,
interest: 0.125,
children: []
},
{
name: Gina,
date: 2010,
interest: 0.125,
children: []
}
]
},
{
name: Diane,
date: 1995,
interest: 0.25,
children: [
{
name: Harley,
date: 2015,
interest: 0.25,
children: []
}
]
}
]
},
{
name: Ben,
date: 1970,
interest: 0.5,
children: [
{
name: Erin,
date: 1970,
interest: 0.5,
children: [
{
name: Ingrid,
date: 1970,
interest: 0.16665,
children: []
},
{
name: Jack,
date: 1970,
interest: 0.16665,
children: []
},
{
name: Kelsey,
date: 1970,
interest: 0.16665,
children: []
}
]
}
]
}
]
}
More From » d3.js
