D3.js dynamically sets the "stroke width" on the path
I have a question very similar to this one regarding dynamically setting the "stroke width" attribute on a path. The suggested solution was to pass the results to the "att-width" attr function for each path, which makes perfect sense, but I can't get this to work.
Here's the expression that puzzled me:
.attr("stroke-width", function(d) { return (d.interest * 50); })
(The above works just fine and sets the attr path if you plug in a number like "5" for the function.)
Here's the complete 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's a 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": []
}
]
}
]
}
]
}
+3
source to share
1 answer