D3：链接是不生效的布局图中可见，当我修改代码以定义键，而不是指数

我工作过的mbostock的Mobile Patent Suit D3：链接是不生效的布局图中可见，当我修改代码以定义键，而不是指数

我修改了数据格式定义的链接节点链接节点键（名称和类型）而不是索引。我已经尝试修改滴答函数并选择和追加，但似乎没有任何工作。

这里是我的代码上JsFiddle

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

.node circle { 
    /*stroke: #fff;*/ 
    cursor: pointer; 
    stroke: #3182bd; 
    stroke-width: 1.5px; 
} 

.node text { 
    font: 10px sans-serif; 
    pointer-events: none; 
    text-anchor: middle; 
} 

.link { 
    stroke-opacity: .6; 
    stroke-width: 1.5px; 
    stroke: #666; 
    fill: none; 
} 

.link.deliverFor { 
    stroke: green; 
} 

.link.sentTo { 
    stroke-dasharray: 0,2 1; 
} 

/* color of nodes based on type */ 
circle.emailAddress { 
    fill: blue; 
} 

circle.ip { 
    fill: red; 
} 

circle.missing { 
    fill: "#3182bd"; 
} 

</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 

var width = 960, 
    height = 500; 

var color = d3.scale.category20(); 

var linkDistanceScale = d3.scale.linear() 
     .domain([10, 5000]) 
     .range([2, 300]) 
     .clamp(true); 

var force = d3.layout.force() 
    .linkDistance(30) 
    .charge(-120) 
    .size([width, height]); 

var svg = d3.select("body") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var graph = { 
    "nodes": [ 
     { 
      "name": "[email protected]", 
      "type": "emailAddress", 
      "size": 1234 
     }, 
     { 
      "name": "192.168.0.1", 
      "type": "ip", 
      "size": 870 
     }, 
     { 
      "name": "[email protected]", 
      "type": "emailAddress", 
      "size": 3423 
     } 
    ], 
    "undirectedNeighbors": [ 
     { 
      "label": "deliverFor", 
      "left": { 
       "name": "[email protected]", 
       "type": "emailAddress" 
      }, 
      "right": { 
       "name": "192.168.0.1", 
       "type": "ip" 
      }, 
      "weight": 366 
     }, 
     { 
      "left": { 
       "type": "emailAddress", 
       "name": "[email protected]" 
      }, 
      "right": { 
       "type": "emailAddress", 
       "name": "[email protected]" 
      }, 
      "label": "sentTo", 
      "weight": 777 
     } 
    ] 
}; 

    var my_nodes = graph.nodes.slice(), 
     my_neighbors = graph.undirectedNeighbors.slice(); 

    console.log("my_neighbors", my_neighbors); 

    var hash_lookup = []; 

    // make it so we can lookup nodes by entry (name: x, type, y) in O(1): 
    my_nodes.forEach(function(node) { 
     var key = {name: node.name, type: node.type}; 
     hash_lookup[key] = node; 
    }); 

    // tell d3 where to find nodes info 
    my_neighbors.forEach(function(link) { 

     var left = link.left; 
     var right = link.right; 

     var leftKey = {name: left.name, type: left.type}; 
     var rightKey = {name: right.name, type: right.type}; 

     link.source = hash_lookup[leftKey]; 
     link.target = hash_lookup[rightKey]; 
    }); 

    console.log("my_neighbors", my_neighbors); 
    console.log("my_nodes", my_nodes); 

    console.log("neighobrs", graph.undirectedNeighbors); 

/************** SETUP FORCE LAYOUT ****************/ 

    force 
     .nodes(my_nodes) 
     .links(my_neighbors) 
     .linkDistance(function(d) { 
      console.log("linkDistance", d); 
      return linkDistanceScale(d.weight); 
     }) 
     .start(); 

console.log("force.links()", force.links()); 
/************** DRAW PATHS ****************/ 

    var link = svg 
     .append("svg:g") // the "curves" is drawn inside this container 
     .selectAll("path") 
     .data(force.links()) 
     .enter() 
     .append("svg:path") 
     // .attr("class", "link") 
     .attr("class", function(d) { 
      return "link " + d.type; 
     }); 


    /************** DRAW CIRCLES ****************/ 
    var node = svg 
     .selectAll(".node") 
     .data(force.nodes()); 

    var circle = node 
     .enter() 
     .append("circle") 
     .attr("class", "node") 
     .attr("r", function(d) { 
      console.log("circle d", d); 
      return Math.sqrt(d.size)/10 || 4.5; 
     }) 
     .attr("class", function(d) { 
      return d.type || "missing";  // color circle based on circl.* defined above 
     }) 
     .call(force.drag); 

    /************** DISPLAY NAME WHEN CURVER HOVER OVER CIRCLE ****************/ 
    var text = circle.append("title") 
     .text(function(d) { return d.name; }); 

    force.on("tick", function() { 
     link.attr("d", function(d) { 
     var dx = d.target.x - d.source.x, 
      dy = d.target.y - d.source.y, 
      dr = Math.sqrt(dx * dx + dy * dy); 

     return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; 

     }); 

     node 
     .attr("transform", function(d) { 
      return "translate(" + d.x + "," + d.y + ")"; }); 
    }); 


</script>

任何有识之士将不胜感激。

来源

2014-03-18 mdho

撇开这种方法是否是一个好主意，问题在于您试图将对象用作对象中的键（您的hash_lookup）。这不是在JavaScript中可用的东西。一个快速，肮脏的黑客修复将只是在使用它们之前将地图键转换为字符串

var hash_lookup = {}; 

// make it so we can lookup nodes by entry (name: x, type, y) in O(1): 
my_nodes.forEach(function(node) { 
    var key = JSON.stringify({name: node.name, type: node.type}); 
    hash_lookup[key] = node; 
}); 

// tell d3 where to find nodes info 
my_neighbors.forEach(function(link) { 

    var left = link.left; 
    var right = link.right; 

    var leftKey = JSON.stringify({name: left.name, type: left.type}); 
    var rightKey = JSON.stringify({name: right.name, type: right.type}); 

    link.source = hash_lookup[leftKey]; 
    link.target = hash_lookup[rightKey]; 
});

来源

2014-03-18 19:56:29 Mark

D3：链接是不生效的布局图中可见，当我修改代码以定义键，而不是指数

回答

相关问题