D3動態佈局在節點上顯示div元素

我需要在d3.js生成的圖形上顯示節點上的鼠標懸停的HTML div元素。主要目的是以結構化方式顯示與懸停節點相關的附加信息。這些信息包含鏈接，圖片和文字。下面是我編寫的用於生成圖形的代碼。它是靜態的圖，其中用戶可以窗框內移動節點：D3動態佈局在節點上顯示div元素

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

.node { 
    stroke: #fff; 
    stroke-width: 1.5px; 
} 

.node.fixed { 
    border: 2px; 
    border-color: #foo; 
} 

.link { 
    stroke: #000; 
    fill: none; 
    stroke-width: 2px; 
    cursor: default; 
} 

.nodeLabel { 
    stroke: #000; 
    stroke-width: 1px; 
} 

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

var width = 1000, 
    height = 850; 

var color = d3.scale.category20(); 
// A map from group ID to image URL. 
var imageByGroup = { 
    "0": "./images/1.png", 
    "1": "./images/2.png", 
    "2": "./images/3.png", 
    "3": "./images/4.png", 
    "4": "./images/5.png", 
    "5": "./images/6.png", 
    "6": "./images/7.png", 
    "7": "./images/8.png", 
    "8": "./images/9.png" 
}; 


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

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .call(d3.behavior.zoom().on("zoom", redraw)); 

// Per-type markers, as they don't inherit styles. 
svg.append("svg:defs").append("svg:marker") 
    .attr("id", 'end-arrow') 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", 17) 
    .attr("refY", 0) 
    .attr("markerWidth", 7) 
    .attr("markerHeight", 7) 
    .attr("orient", "auto") 
    .append("svg:path") 
    .attr("d", "M5,0L0,-5L10,0L0,5L5,0") 
    .attr('fill', '#000'); 

d3.json("input.json", function(error, graph) { 
    force 
     .nodes(graph.nodes) 
     .links(graph.links) 
     .start(); 

    var link = svg.selectAll(".link") 
     .data(graph.links) 
    .enter().append("line") 
     .attr("class", "link") 
     .style('marker-end', 'url(#end-arrow)'); 

var drag = force.drag() 
    .on("dragstart", dragstart);  

    var node = svg.selectAll(".node") 
     .data(graph.nodes) 
    .enter().append("g") 
     .attr("class", "node") 
     .call(drag); 

    node.append("image") 
     .attr("xlink:href", function(d) {return imageByGroup[d.group];}) 
     .attr("x", -24) 
     .attr("y", -24) 
     .attr("width", 48) 
     .attr("height", 48); 

    node.append("text") 
     .attr("text-anchor", "middle") 
     .attr("dy",35) 
     .attr("class", "nodeLabel") 
     .text(function(d) { return d.name; });  

    node.append("title") 
     .text(function(d) { return d.id+"--"+d.name; }); 
    node.on("click", function(d){//alert(d.name) 
    }); 

    force.on("tick", function() { 
    node.attr("cx", function(d) { return Math.min(width,d.x); }) 
     .attr("cy", function(d) { return Math.min(height,d.y); }) 
     .attr("transform", function(d) { return "translate(" + Math.min(width,d.x)+ "," + Math.min(height,d.y) + ")"; }); 
    link.attr("x1", function(d) { return Math.min(width,d.source.x); }) 
     .attr("y1", function(d) { return Math.min(height,d.source.y); }) 
     .attr("x2", function(d) { return Math.min(width,d.target.x); }) 
     .attr("y2", function(d) { return Math.min(height,d.target.y); });  
    }); 


}); 

function redraw() { 
    svg.attr("transform", " scale(" + d3.event.scale + ")"); 
} 
    function dragstart(d) { 
     d.fixed = true; 
     d3.select(this).classed("fixed", true); 
    } 
</script>

輸入JSON文件是：

{ 
    "nodes":[ 
    {"id":0,"name":"n1","group":0,"x":50,"y":50,"fixed":true}, 
    {"id":1,"name":"n2","group":0,"x":200,"y":140,"fixed":true}, 
    {"id":2,"name":"n3","group":0,"x":200,"y":50,"fixed":true}, 
    {"id":3,"name":"n4","group":0,"x":350,"y":50,"fixed":true} 
    ], 
    "links":[ 
    {"source":1,"target":3,"value":1}, 
    {"source":0,"target":2,"value":1}, 
    {"source":0,"target":1,"value":1}, 
    {"source":2,"target":3,"value":1} 
    ] 
}

文字提示是工作的罰款與上面的代碼，但我需要表現出更多的圖像和鏈接作爲如上所述格式化。

此外，如果您可以請讓我知道是否可以更改懸停上的節點圖像以使其顯示爲突出顯示。

來源

2013-08-22 A.G.

你只需要與像命令綁定動作：

node.on("mouseover", mouseover) 
    .on("mouseout", mouseout)

凡mouseover和mouseout的功能，你可以得到的徘徊，在參數節點：

function mouseover(d) { 
    // d is the node object 
    // You can even get mouse position with this command 
    var mousePos = d3.mouse(this); 
}

書"Interactive Data Visualization"還有一章講述如何使工具提示出現。

來源

2013-08-22 09:56:56

感謝您的建議。它的工作和書的鏈接也很有幫助。我接受了這個答案。 –

D3動態佈局在節點上顯示div元素

回答

相關問題