超级链接在儿童（d3.js对象）在可折叠的力布局

我不知道如何在d3.js编程，我知道我的问题可能很简单，甚至愚蠢。我试图修改这个可视化http://bl.ocks.org/mbostock/1093130，通过添加超链接到层次结构的最后一个对象（橙色的）。我知道有人在点击父元素时发生了一些事情（崩溃，扩大），但孩子（最后一个）似乎没有对点击执行特定操作，是否可以在那里添加超链接？超级链接在儿童（d3.js对象）在可折叠的力布局

这是index.html的

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

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

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

line.link { 
    fill: none; 
    stroke: #9ecae1; 
    stroke-width: 1.5px; 
} 

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

var width = 960, 
    height = 500, 
    root; 

var force = d3.layout.force() 
    .linkDistance(80) 
    .charge(-120) 
    .gravity(.05) 
    .size([width, height]) 
    .on("tick", tick); 

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

var link = svg.selectAll(".link"), 
    node = svg.selectAll(".node"); 

d3.json("graph.json", function(error, json) { 
    root = json; 
    update(); 
}); 

function update() { 
    var nodes = flatten(root), 
     links = d3.layout.tree().links(nodes); 

    // Restart the force layout. 
    force 
     .nodes(nodes) 
     .links(links) 
     .start(); 

    // Update links. 
    link = link.data(links, function(d) { return d.target.id; }); 

    link.exit().remove(); 

    link.enter().insert("line", ".node") 
     .attr("class", "link"); 

    // Update nodes. 
    node = node.data(nodes, function(d) { return d.id; }); 

    node.exit().remove(); 

    var nodeEnter = node.enter().append("g") 
     .attr("class", "node") 
     .on("click", click) 
     .call(force.drag); 

    nodeEnter.append("circle") 
     .attr("r", function(d) { return Math.sqrt(d.size)/10 || 4.5; }); 

    nodeEnter.append("text") 
     .attr("dy", ".35em") 
     .text(function(d) { return d.name; }); 

    node.select("circle") 
     .style("fill", color); 
} 

function tick() { 
    link.attr("x1", function(d) { return d.source.x; }) 
     .attr("y1", function(d) { return d.source.y; }) 
     .attr("x2", function(d) { return d.target.x; }) 
     .attr("y2", function(d) { return d.target.y; }); 

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

function color(d) { 
    return d._children ? "#3182bd" // collapsed package 
     : d.children ? "#c6dbef" // expanded package 
     : "#fd8d3c"; // leaf node 
} 

// Toggle children on click. 
function click(d) { 
    if (d3.event.defaultPrevented) return; // ignore drag 
    if (d.children) { 
    d._children = d.children; 
    d.children = null; 
    } else { 
    d.children = d._children; 
    d._children = null; 
    } 
    update(); 
} 

// Returns a list of all nodes under the root. 
function flatten(root) { 
    var nodes = [], i = 0; 

    function recurse(node) { 
    if (node.children) node.children.forEach(recurse); 
    if (!node.id) node.id = ++i; 
    nodes.push(node); 
    } 

    recurse(root); 
    return nodes; 
} 

</script>

这是JSON：

{ 
"name": "flare", 
"children": [ 
    { 
    "name": "analytics", 
    "children": [ 
    { 
    "name": "cluster", 
    "children": [ 
     {"name": "AgglomerativeCluster", "size": 3938}, 
     {"name": "CommunityStructure", "size": 3812}, 
     {"name": "HierarchicalCluster", "size": 6714}, 
     {"name": "MergeEdge", "size": 743} 
    ] 
    }, 
    { 
    "name": "graph", 
    "children": [ 
     {"name": "BetweennessCentrality", "size": 3534}, 
     {"name": "LinkDistance", "size": 5731}, 
     {"name": "MaxFlowMinCut", "size": 7840}, 
     {"name": "ShortestPaths", "size": 5914}, 
     {"name": "SpanningTree", "size": 3416} 
    ] 
    }, 
    { 
    "name": "optimization", 
    "children": [ 
     {"name": "AspectRatioBanker", "size": 7074} 
    ] 
    } 
    ] 
    } 
] 
}

我想是 “AspectRatioBanker” 能带我去www.aspectratiobanker.com，例如。谢谢！

来源

2013-12-19 Ernesto

这里有两个选项。

包括a tag in the SVG本身。
在点击处理程序中处理该操作。

第一种选择是更好的使用IMO，因为它更加语义化，并允许用户看到该节点是链接，右键单击并复制网址并在新页面中打开它等。

然而，第二个将需要至少改变计划：

// Toggle children on click. 

var urlMap = { 
    'AspectRatioBanker': 'http://www.google.com' 
    // ... more name -> URL mappings 
}; 

function click(d) { 
    if (d3.event.defaultPrevented) return; // ignore drag 
    if (d.children) { 
    d._children = d.children; 
    d.children = null; 
    } else if (d._children) { 
    d.children = d._children; 
    d._children = null; 
    } else { 
    // This was a leaf node, so redirect. 
    window.location = urlMap[d.name]; 
    } 
    update(); 
}

来源

2013-12-19 06:11:59

谢谢！我知道这就是我说这个问题的方式，而且我已经有了一个答案，但是，有没有办法将对象链接到与名称不同的url？比方说，AspectRadioBanker以google.com为例？ – Ernesto

@Ernesto用URLmap字典更新了答案。 –

太棒了，非常感谢。我管理（不问我如何）解决问题，并找到一种方法来显示新兴的窗口作为弹出窗口使用这个： window.open（d.url，'popUpWindow'，'height = 600，宽度= 800，左= 10，顶部= 10，可调整大小=是，滚动条=没有，工具栏=没有，菜单栏=没有，位置=没有，目录=没有，状态=是）; } update（）; } 我为自己感到骄傲（hehehe）...现在我试图打破名称的界限，因为它们太长了。 – Ernesto

超级链接在儿童（d3.js对象）在可折叠的力布局

回答

相关问题