Question

更新：修改了JSON并添加了代码示例以根据兴趣数据显示节点，但我仍然无法使“笔画宽度”工作。任何帮助赞赏。

我想用d3.js建立一个描述房地产利息分配/转移的树状图，我需要一些帮助。我的初始概念：沿着由数据定义的相对时间轴的树形图的空间节点，以给出特定传输发生时的上下文。根据传播到接收节点的标准化兴趣量（如Sankey图中的路径）来缩放每个连接路径的宽度，以提供传输幅度的上下文。这对于通过销售，继承等可视化不动产或类似的利益分配是有用的。我感谢任何有用的提示或建议。感谢您考虑我的问题。

示例：Example Image

示例数据：

data = 
{
  "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": []
            }
          ]
        }
      ]
    }
  ]
}

示例树（从此来源修改：http://www.meccanismocomplesso.org/en/dendrogramma-d3-parte2/）

<!doctype html></html>
  <meta charset="utf-8" />
  <style>
  .node circle {     
    fill: #fff;    
    stroke: steelblue;    
    stroke-width: 1.5px; 
  } 
  .node {    
    font: 20px sans-serif; 
  } 
  .link {    
    fill: none;    
    stroke: #ccc;    
    stroke-width: 1.5px; 
  }
  </style> 
  <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
  <script type="text/javascript"> 
  var width = 600; 
  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("dendrogram01.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 * 100 ;})       
        .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.children ? -8 : 8; })       
        .attr("dy", 3)       
        .style("text-anchor", function(d) { return d.children ? "end" : "start"; })      
        .text( function(d){ return d.name;}); 
  }); 
  </script>

在d3.js中可视化随时间的利益转移

0 个答案: