3
我有一個非常類似於this one的問題,關於動態設置路徑上的「stroke-width」屬性。提供的解決方案是將函數的結果傳遞給每個路徑的「stroke-width」attr,這非常合理,但我無法設法使其工作。d3.js在路徑上動態設置「stroke-width」
這裏是有我難倒了聲明:
.attr("stroke-width", function(d) { return (d.interest * 50); })
(以上作品就好了,並設置路徑ATTR如果替代品的數量,如「5」的功能。)
這裏是全碼:
<!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>
這裏是樣品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": []
}
]
}
]
}
]
}
您是否嘗試使用'.style('stroke-width',...)'而不是? – 2014-09-19 14:50:31
@icanc我試過「.attr(...)」和「.style(...)」。我發現唯一的區別是.attr我可以看到作爲stroke-width =「NaN」添加到元素的「style-width」屬性,並且.style我看不到影響。無論哪種方式,我都無法獲得改變路徑筆畫寬度的所需結果。同樣的功能在設置半徑屬性時起作用[如in ... node.append(「circle」) .attr(「r」,function(d){return d.interest * 50;}); ...],因此我仍然處於虧損狀態。 –
XonAether
2014-09-19 15:31:44
'NaN'是你的暗示。當你乘以'd.interest * 50'時,結果是「不是數字」。可能的原因:路徑上的「d」設置不正確,或者「d.interest」不是有效的數字。看看你的代碼,看起來'd'存在,但不是你想象的那樣,所以'd.interest'不存在。路徑的'd'是包含源值和目標值的鏈接對象。興趣值包含在節點數據對象中。 – AmeliaBR 2014-09-19 17:12:50