如何通過JavaScript中的節點彈出窗口創建鼠標

Question

我一直在試圖弄清楚如何讓彈出窗口顯示在我的強制定向圖表的節點上，當你將鼠標放在它們上面時。有誰知道一個方法來執行這個？該圖表是使用D3庫建立的。

下面是圖表。我想添加描述性的彈出窗口的每個項目，當你將鼠標懸停他們：

這裏是另一種力量導演圖表

var w = 1000, 
     h = 1000; 

var circleWidth = 5; 

var palette = { 
     "lightgray": "#819090", 
     "gray": "#708284", 
     "mediumgray": "#536870", 
     "darkgray": "#475B62", 

     "darkblue": "#0A2933", 
     "darkerblue": "#042029", 

     "paleryellow": "#FCF4DC", 
     "paleyellow": "#EAE3CB", 
     "yellow": "#A57706", 
     "orange": "#BD3613", 
     "red": "#D11C24", 
     "pink": "#C61C6F", 
     "purple": "#595AB7", 
     "blue": "#2176C7", 
     "green": "#259286", 
     "yellowgreen": "#738A05" 
    } 

var nodes = [ 
     { name: "Stratification"},     //0 
     { name: "Racism", target:[0]},    //1 
     { name: "Job Descrimination", target: [0]}, //2 
     { name: "Zoning", target: [0]},    //3 
     { name: "G.I. Bill", target: [0]},   //4 
     { name: "Gentrification", target: [0]},  //5 
     { name: "Education", target: [0]},   //6 
     { name: "Redlining", target: [0]},   //7 
     { name: "Digital Divide", target: [0]},  //8 
     { name: "Whitewashing", target: [0]},  //9 
     { name: "Budget Cuts", target: [0]},  //10 
     { name: "Tithes", target: [0]},    //11 
     { name: "Sexism", target: [0]},    //12 
     { name: "Slavery", target: [0]},   //13 
     { name: "Ghettoization", target: [0]},  //14 
     { name: "Colorism", target: [0]},   //15 
     { name: "Prison System", target: [0]},     //16 
     { name: "Jim Crow", target: [0]},   //17 
     { name: "Police Brutality", target: [0]}, //18 
     { name: "War on Drugs", target: [0]},  //19 
     { name: "Anti-Immigration", target: [0]}, //20 
     { name: "Sharecropping", target: [0]},  //21 
     { name: "Class Division", target: [0]},  //22 
     { name: "Religious Freedom Bill", target: [0]}, //23 
     { name: "Tax Exemption", target: [0]},  //24 
     { name: "Wage Gap", target: [0]},   //25 
     { name: "Legacy Income", target: [0]},  //26 
     { name: "Capitalism", target: [0]},   //27 
     { name: "Sexual Orientation", target: [0]}, //28 

]; 

var links = []; 

for (var i = 0; i< nodes.length; i++) { 
     if (nodes[i].target !== undefined) { 
      for (var x = 0; x< nodes[i].target.length; x++) { 
        links.push({ 
         source: nodes[i], 
         target: nodes[nodes[i].target[x]] 
        }) 
      } 
     } 
} 

var myChart = d3.select('#chart') 
     .append('svg') 
     .attr('width', w) 
     .attr('height', h) 

var force = d3.layout.force() 
    .nodes(nodes) 
    .links([]) 
    .gravity(0.3) 
    .charge(-1000) 
    .size([w, h]) 

var link = myChart.selectAll('line') 
    .data(links).enter().append('line') 
    .attr('stroke', palette.gray) 

var node = myChart.selectAll('circle') 
    .data(nodes).enter() 
    .append('g') 
    .call(force.drag); 

node.append('circle') 
    .attr('cx', function(d) { return d.x; }) 
    .attr('cy', function(d) { return d.y; }) 
    .attr('r', circleWidth) 
    .attr('fill', function(d, i) { 
     if (i>0) { return palette.pink } 
     else { return palette.blue } 
    }) 

node.append('text') 
    .text(function(d) { return d.name}) 
    .attr('font-family', 'Roboto Slab') 
    .attr('fill', function(d, i) { 
     if (i>0) { return palette.mediumgray} 
     else { return palette.yellowgreen} 
    }) 
    .attr('x', function(d, i) { 
     if (i>0) { return circleWidth + 4 } 
     else { return circleWidth -15 } 
    }) 
    .attr('y', function(d, i) { 
     if (i>0) { return circleWidth } 
     else { return 8 } 
    }) 
    .attr('text-anchor', function(d, i) { 
     if (i>0) { return 'beginning' } 
     else { return 'end'} 
    }) 
    .attr('font-size', function(d, i) { 
     if (i>0) { return '1em' } 
     else { return '1.8em'} 
    }) 

force.on('tick', function(e) { 
    node.attr('transform', function(d, i) { 
     return 'translate('+ d.x +', '+ d.y +')'; 
    }) 

    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 }) 
}) 

force.start(); 

Answer 1

爲例您可以嘗試d3-tip plugin作爲起點。這將爲您提供具有自定義功能的鼠標懸停工具提示。

Answer 2

你要找的是mouseover事件處理程序。 更新您的圈子代碼與鼠標懸停處理程序

 node.append('circle') 
      .attr('cx', function(d) { return d.x; }) 
      .attr('cy', function(d) { return d.y; }) 
      .attr('r', circleWidth) 
      .attr('fill', function(d, i) { 
       if (i>0) { return palette.pink } 
       else { return palette.blue } 
      }) 
    .on("mouseover", function(d) {  
       div.transition()   
        .duration(200)  
        .style("opacity", .9);  
       div .html("<h5>description:</h5><p> " + description[d.name] +"</p>")  
        .style("left", (d3.event.pageX) + "px")  
        .style("top", (d3.event.pageY - 28) + "px");  
       })     
      .on("mouseout", function(d) {  
       div.transition()   
        .duration(500)  
        .style("opacity", 0); 
      }); 

http://codepen.io/srajagop/pen/OmqMQq

我不知道哪個插件或您希望如何使用用於顯示信息。有很多提示插件可用。希望這有助於