d3.js在路径上动态设置“stroke-width”

我有一个非常类似于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": [] 
      } 
      ] 
     } 
     ] 
    } 
    ] 
}

来源

2014-09-19 XonAether

您是否尝试使用'.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

感谢@AmeliaBR我能够根据需要获得笔画宽度。我改变了参考值从d.interest到d.target.interest如下：

.attr("stroke-width", function(d) { return (d.target.interest * 50); })

我很欣赏的指导和帮助。

来源

2014-09-20 18:39:58 XonAether

d3.js在路径上动态设置“stroke-width”

回答

相关问题