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

Question

我做了一个 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

Answer 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('');
          });

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

希望对您有所帮助。

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

How to display the size as tooltip in a d3 graph?

javascript

jquery

d3.js

svg

tooltip