javascript d3.js 在路径上动态设置“笔画宽度”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25936593/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
d3.js dynamically setting "stroke-width" on a path
提问by XonAether
I have a question very similar to this oneregarding 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.)
（如果用“5”之类的数字代替函数，上面的方法就可以正常工作并设置路径属性。）
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:
这是示例 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": "Hyman",
"date": 1970,
"interest": 0.16665,
"children": []
},
{
"name": "Kelsey",
"date": 1970,
"interest": 0.16665,
"children": []
}
]
}
]
}
]
}
回答by XonAether
Thanks to @AmeliaBR I was able to get the stroke-width to work as I desired. I changed the reference to the value from d.interestto d.target.interestas follows:
感谢@AmeliaBR，我能够让笔划宽度按照我的意愿工作。我将对该值的引用从d.interest更改d.target.interest为如下：
.attr("stroke-width", function(d) { return (d.target.interest * 50); })
I really appreciate the guidance and help.
我非常感谢您的指导和帮助。
