score:0

Accepted answer

Realized how to put info on hover (multiple info):

// Append custom images
        node.append("svg:image")
            .attr("xlink:href",  function(d) { return d.img;}) // update the node with the image
            .attr("x", function(d) { return -5;}) // how far is the image from the link??
            .attr("y", function(d) { return -19;}) // --- same ---
            .attr("height", 35) // size
            .attr("width", 35)
            .on("mouseover", function(d) {
                div.transition()
                    .duration(200)
                    .style("opacity", .9);
                div .html( d.title  + "<br/>" + d.t)
                    .style("left", (d3.event.pageX + 10) + "px")
                    .style("top", (d3.event.pageY - 38) + "px");
            })
            .on("mouseout", function(d) {
                div.transition()
                    .duration(500)
                    .style("opacity", 0);
            });

with the following portion added into the css:

div.tooltip {
    position: absolute;
    text-align: center;
    width: 60px;
    height: 28px;
    padding: 2px;
    font: 12px sans-serif;
    background: lightsteelblue;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
}

and this block is then unnecessary:

// Get information on hover ----- DOESNT WORK
                node.append("text")
                    .attr("class", "nodetext")
                    .attr("x",function(d) { return -25;})
                    .attr("y",function(d) { return -25;})
                    .text(function(d) { return d.text; });

Related Query

More Query from same tag