我正在处理这个例子: http: //mbostock.github.io/d3/talk/20111116/pack-hierarchy.html
我对 d3 非常陌生,并且很难将标签(在最大放大级别)链接到外部站点。
我正在处理这个例子: http: //mbostock.github.io/d3/talk/20111116/pack-hierarchy.html
我对 d3 非常陌生,并且很难将标签(在最大放大级别)链接到外部站点。
这是我基于相同示例的方法:
vis.selectAll("circle")
.data(nodes)
.enter().append("svg:circle")
.attr("class", function(d) { return d.children ? "parent" : "child"; })
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.r; })
.on("click", function(d) {
if(typeof d.children === 'undefined' && d != node){
vis.selectAll("text")
.style("pointer-events","all")
.style("fill","#0000EE")
.style("font-size","32px")
.style("cursor","pointer")
.style("text-decoration","underline")
}
else
{
vis.selectAll("text")
.style("pointer-events","none")
.style("fill","black")
.style("font-size","14px")
.style("text-decoration","none")
}
return zoom(node == d ? root : d);
});
诀窍是修改css以在缩放到最远级别时激活指针事件,然后使用选择文本元素添加点击功能......
vis.selectAll("text")
.data(nodes)
.enter().append("svg:text")
.attr("class", function(d) { return d.children ? "parent" : "child"; })
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.style("opacity", function(d) { return d.r > 20 ? 1 : 0; })
.text(function(d) { return d.name; })
.on("click",function(d){
window.location = d.url});
这是带有链接的 json 文件的示例
"name": "NIFA",
"children": [
{
"name": "Developers","url":"http://nifa.org/programs/index.html",
"children": [
{"name": "Prairie Gold Homes", "size": 3179,"url":"http://nifa.org/programs/index.html?topic=desc&ovr_ov=-over&prog_name_sent=Prairie+Gold+Homes"},
{"name": "NebHi-RED", "size": 4060,"url":"http://nifa.org/programs/index.html?topic=desc&ps=choose&prog_name_sent=NebHi-RED"},
{"name": "CROWN", "size": 4138,"url":"http://nifa.org/programs/index.html?topic=desc&ps=choose&prog_name_sent=CROWN"},
{"name": "Bingo Bonds", "size": 1690,"url":"http://nifa.org/programs/index.html?topic=desc&ovr_ov=-over&prog_name_sent=BINGO+Bonds"},
{"name": "SizeEncoder", "size": 1830,"url":"http://nifa.org/programs/index.html?topic=desc&ps=choose&prog_name_sent=Infrastructure+Loan+Guarantee"}
]
},
希望有帮助!