如何在 d3 图表中将大小显示为工具提示？答案

【问题标题】：How to display the size as tooltip in a d3 graph?如何在 d3 图表中将大小显示为工具提示？
【发布时间】：2015-10-28 07:10:26
【问题描述】：

我已经完成了一个工作正常的 d3 小部件，现在需要将大小显示为工具提示。我尝试将鼠标悬停事件附加到节点，这似乎不起作用。这是我的代码：

  var width = 460,
        height = 300;
    var color = d3.scale.category20();
    var radius = d3.scale.sqrt()
        .range([0, 3]);
    var svg = d3.select("#mdView").append("svg")
        .attr("viewBox", "0 0 460 300 ")
        .attr("width", '100%')
        .attr("height", '100%');

    var force = d3.layout.force()
        .size([width, height])
        .charge(-300)
        .linkDistance(function(d) {
            return radius(d.source.size) + radius(d.target.size) + 20;
        });
       d3.json("views/graph.json", function(error, graph) {
        if (error) throw error;
        force
            .nodes(graph.nodes)
            .links(graph.links)
            .on("tick", tick)
            .start();

        var tooltip = d3.select("#chart")
        .append("div")
        .style("position", "absolute")
        .style("z-index", "10")
        .style("visibility", "hidden");

        tooltip.append("div")
        .attr("id", "tt-name")
        .text("simple");

        var link = svg.selectAll(".link")
            .data(graph.links)
            .enter().append("g")
            .attr("class", "link");

        link.append("line")
            .style("stroke-width", function(d) {
                return (d.bond * 2 - 1) * 2 + "px";
            });

        link.filter(function(d) {
                return d.bond > 1;
            }).append("line")
            .attr("class", "separator");

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

        node.append("circle")
            .attr("r", function(d) {
                return radius(d.size);
            })
            .style("fill", function(d) {
                return color(d.skill);
            });

        node.append("text")
            .attr("dy", ".35em")
            .attr("text-anchor", "margin-left")
            .text(function(d) {
                return d.skill;
            });

        function tick() {
            link.selectAll("line")
                .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 + ")";
            });
        }
    });

工作JSFIDDLE

【问题讨论】：

仅供参考，小提琴不起作用，它没有加载 d3 库，也无法访问数据。
添加 d3.js 参考请添加一些虚拟 json 数据 ..jsfiddle.net/kishoresahas/3gytsd4a/1
查看更新版本'
@Sajeetharan 您似乎没有在任何地方使用工具提示。你见过this example吗？

标签： javascript jquery d3.js svg tooltip

【解决方案1】：

我试图通过编辑你的脚本给你一些起点，..请看一下

     // NOTE : please add position:relative to #mdView html element.
     var tooltip = d3.select("#mdView") // changed the selector
        .append("div")
        .style("position", "absolute")
        .style("z-index", "10")
        .style("padding", "10px")
        .style("background-color", "#333")
        .style("border-radius", "5px")
        .style("color", "#fff") 
        .style("opacity", "0");

      var node = svg.selectAll(".node")
            .data(graph.nodes)
            .enter().append("g")
            .attr("class", "node")
            .call(force.drag)
             /* Added these two events */
            .on('mousemove',function(d,i){
                 console.log(d);
                tooltip
                .style('top',d.y+'px')
                .style('left',d.x+'px')
                .style('opacity',1)
                .html('size : '+d.size);
          }).on('mouseleave',function(){
              tooltip 
                .style('opacity',0)
                .html('');
          });

请记住，这只是您的起点，如果您需要更多帮助，请尽管询问。

希望对你有帮助。

【讨论】：