How to display a text when mouseover a cilcle

Question

I have tried a code but it dosent work properly. Can you suggest a method to resolve the error. I am new to Visualization and at the beginning stage of d3.js

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js">    </script>
</head>
<body>
<div id="viz"></div>
<script type="text/javascript">

var sampleSVG = d3.select("#viz")
    .append("svg")
    .attr("width", 100)
    .attr("height", 100);    

sampleSVG.append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 40)
    .attr("cx", 50)
    .attr("cy", 50)
    .on("mouseover", function()    {d3.select(this).append("text").attr("fill","blue").text("fill aliceblue");})


 </script>
 </body>
 </html>

Can you maybe provide a jsfiddle of the issue. Also what is the error? — AndrewPolland, Jun 25 '15 at 07:11

score 2 · Accepted Answer · answered Jun 25 '15 at 07:26

2

Your are trying to append the text element to the circle, which is not possible. Create a group element and add your circle and text elements to that group. Here is an example.

var sampleSVG = d3.select("#viz")
    .append("svg")
    .attr("width", 100)
    .attr("height", 100);    

var grp = sampleSVG.append("g");

var circle = grp.append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 40)
    .attr("cx", 50)
    .attr("cy", 50);

circle.on("mouseover", function() {
      grp.append("text")
        .style("fill", "black")
        .attr("x", 32)
        .attr("y", 52)
        .text("Hello");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="viz"></div>

answered Jun 25 '15 at 07:26

DavidDomain

14,976
4
42
50

What should i do if i need to display the "amount" and "created at" values as text when i mouseover the respective circles. I need 5 circles to represent those datas. var JSONData = [ { "id": 3, "created_at": "Sun May 05 2013", "amount": 12000}, { "id": 1, "created_at": "Mon May 13 2013", "amount": 2000}, { "id": 2, "created_at": "Thu Jun 06 2013", "amount": 17000}, { "id": 4, "created_at": "Thu May 09 2013", "amount": 15000}, { "id": 5, "created_at": "Mon Jul 01 2013", "amount": 16000} ]; – Mathew Shaji Jun 25 '15 at 08:21
Are you using the `data` operator to bind your data to the dom? – DavidDomain Jun 25 '15 at 08:31
Take a look at the following tutorial https://www.dashingd3js.com/svg-text-element. I am sure you will get the idea. Just use the `data` operator to bind your data to the dom. Here is another tutorial that will help you understand how to work with data. https://www.dashingd3js.com/using-data-bound-to-dom-elements – DavidDomain Jun 25 '15 at 08:34

score 0 · Answer 2 · edited May 23 '17 at 12:22

As suggested here: https://stackoverflow.com/a/16780756/1023562

Create a tooltip div and attach it to mouseover, mousemove and mouseout events.

var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

sampleSVG.append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 40)
    .attr("cx", 50)
    .attr("cy", 50)
.on("mouseover", function(){return tooltip.style("visibility", "visible");})
.on("mousemove", function(){return tooltip.style("top",
    (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});

Working fiddle: https://jsfiddle.net/vc95wcvm/

Note that in this Fiddle I have loaded http://d3js.org/d3.v2.js in the script panel (because Fiddle refuses to load it over http, it requires https), so the code that interests you is at the bottom of script panel.

How to display a text when mouseover a cilcle

2 Answers2