如何在d3图形中将大小显示为工具提示? [英] How to display the size as tooltip in a d3 graph?

问题描述

我已经完成了d3小部件，该小部件可以正常工作，现在需要在工具提示中显示尺寸.我尝试将mouseover事件附加到节点，这似乎不起作用.这是我的代码:

I have done a d3 widget which works fine, now needs to show the size as tooltip. I have tried attaching mouseover event to the node, that does not seems to work. here is my code:

  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

推荐答案

我试图通过编辑脚本为您提供一些起点，..请看看

I tried to give you some starting point by editing your script,.. please take a look

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

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

Please keep in mind this is just a starter point for you , If you need more help please just ask.

希望有帮助.

这篇关于如何在d3图形中将大小显示为工具提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！