Question

我有一个与this one非常相似的问题，关于在路径上动态设置“stroke-width”属性。提供的解决方案是将函数的结果传递给每个路径的“stroke-width”attr，这非常有意义，但我无法设法使其工作。

以下是我难倒的陈述：

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

（以上工作正常并且如果替换了类似“5”的数字，则设置路径attr。）

以下是完整代码：

<!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": []
            }
          ]
        }
      ]
    }
  ]
}

Answer 1

感谢@AmeliaBR，我能够按照我的意愿获得笔画宽度。我将对d.interest的值的引用更改为d.target.interest，如下所示：

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

我非常感谢指导和帮助。

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

1 个答案: