Question

我一直在试图弄清楚当你将鼠标悬停在我的Force Directed图表的节点上时弹出窗口的显示方式。有谁知道执行此方法？该图表是使用D3库构建的。

这是图表。当您将鼠标悬停在每个项目上时，我想为每个项目添加描述性弹出窗口：

Chart

以下是另一个Force Directed Chart

的示例

Pop

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

我不确定哪个插件或您希望如何使用它来显示信息。有很多工具提示插件可用。希望这有帮助

如何在JavaScript中为节点创建鼠标弹出窗口

2 个答案: