How to display a text when mouseover a cilcle - javascript

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>

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>

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.

Related

d3 line chart v3 upgrade to v4 - transition [duplicate]

Here is my code:
<html>
<head>
<meta charset="UTF-8">
<title>circle</title>
</head>
 
<body>
<script src="http://d3js.org/d3.v4.min.js"></script>
    <script>
var width = 400;
var height = 400;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var circle1 = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 45)
.style("fill","green");
circle1.transition()
.duration(1000) //延迟1000ms
.attr("cx", 300);
var circle2 = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 45)
.style("fill","green");
circle2.transition()
.duration(1500)
.attr("cx", 300)
.style("fill", "red");
var circle3 = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 45)
.style("fill","green");
circle3.transition()
.duration(2000)
.transition()
.ease("bounce")
.attr("cx", 300)
.style("fill", "red")
.attr("r", 25);
    </script>    
</body>
</html>
When I learn how to use the .ease("bounce")in d3 v4.x, the error is always jump out in html:45. In the official introduction: .ease("bounce") now should be used like this:
d3.easeBounce(t)
but it also doesn't work, so I don't know how to modify it. Could you give me a good introduction? Thanks!
The documentation on transition.ease([value]) tells us, that
The value must be specified as a function.
Therefore, you just need to pass in the easing function d3.easeBounce without actually calling it (note, that there are no parentheses following d3.easeBounce):
circle3.transition()
.duration(2000)
.transition()
.ease(d3.easeBounce) // Pass in the easing function
I agree with Altocumulus's answer, but I try to get rid of one of the middle.transition(), and it will run well.
circle3.transition()
.duration(2000)
.ease(d3.easeBounce)

Why is the data displayed using D3.js looks cutoff?

I am using D3.js to draw some circles inside a div but for some reason no data is displayed in the bottom third of the did even though the specified size of the canvas is equivalent to the size of the of the div.
var data = d3.csv('circles.csv', function(data){
var canvas = d3.select('.cell').append("svg");
canvas.selectAll("circles")
.attr("width", 300)
.attr("height", 250)
.data(data)
.enter()
.append("circle")
.attr("cx", function(d){return (+d.x)})
.attr("cy", function(d){return (+d.y)})
.attr("r", function(d){return (+d.radius)})
.attr("fill", "green");
});
I set a code snippet for what it looks like if no svg size specified. So if ur case is like this, the data point at the bottom may be just go out the SVG viewport area.
var canvas = d3.select('.cell').append("svg")
// if u did not specify size
//.attr("width", 400).attr("height", 400);
canvas.selectAll("circle").data([0])
// .attr("width", 300)
// .attr("height", 250)
// .data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
return 150;
})
.attr("cy", function(d) {
return 125;
})
.attr("r", function(d) {
return 125;
})
.style("fill", "green");
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
</head>
<body>
<div class="cell" style="width:500px; height:500px;"></div>
</body>
</html>

Add hover event on intersecting sections of SVG graph

I have create a fiddle http://jsfiddle.net/bhyt7L5z/
I have 5 ellipse intersecting each other. I want to capture hover event on intersecting areas and show corresponding data in tool-tip.
ASomething like :
$('paths').hover(function(e) {
console.log('show content related to intersection');
});
Can anyone give me pointers on how to do this.
Is there any chart available in JavaScript which gives interactive elliptical venn diagram
Regards
just append .attr('id','ellipse1') for each of you ellipse and now you can use
$('#ellipse1').hover(function(e) {
console.log('show content related to intersection');
});
code from you jsfiddle:
var width = 450,
height = 400
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("svg:ellipse")
.attr("cx", 200)
.attr("cy", 200)
.attr("rx", 50)
.attr("ry",100)
.style("fill", 'rgba(108,255,108,0.4)')
.style("stroke", "#777")
.style("stroke-width", '1px')
.style("transform", 'rotate(30deg)')
.style("transform-origin", "50% 50%")
.attr("id","ellipse1")
.attr("data-toggle","tooltip")
.attr("title","ellipse1")
svg.append("svg:ellipse")
.attr("cx", 200)
.attr("cy", 200)
.attr("rx", 50)
.attr("ry",100)
.style("fill", 'rgba(168,255,168,0.4)')
.style("stroke", "#777")
.style("stroke-width", '1px')
.style("transform", 'rotate(70deg)')
.style("transform-origin", "50% 50%")
.attr("id","ellipse2")
.attr("data-toggle","tooltip")
.attr("title","ellipse2")
svg.append("svg:ellipse")
.attr("cx", 200)
.attr("cy", 200)
.attr("rx", 50)
.attr("ry",100)
.style("fill", 'rgba(148,255,148,0.4)')
.style("stroke", "#777")
.style("stroke-width", '1px')
.style("transform", 'rotate(110deg)')
.style("transform-origin", "50% 50%")
.attr("id","ellipse3")
.attr("data-toggle","tooltip")
.attr("title","ellipse3")
svg.append("svg:ellipse")
.attr("cx", 200)
.attr("cy", 200)
.attr("rx", 50)
.attr("ry",100)
.style("fill", 'rgba(128,255,128,0.4)')
.style("stroke", "#777")
.style("stroke-width", '1px')
.style("transform", 'rotate(140deg)')
.style("transform-origin", "50% 50%")
.attr("id","ellipse4")
.attr("data-toggle","tooltip")
.attr("title","ellipse4")
$('[data-toggle="tooltip"]').tooltip({container: 'body'});
svg {
border:1px dotted #000;
}
<script src="http://d3js.org/d3.v3.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="content"></div>

mouseover doesn't work on d3 rectangle

I am new at d3. I have written the below code for 3 rectangles to appear and make them have some mouse interaction.
svg.append("g").selectAll("rect")
.data([1,2,3])
.enter()
.append("rect")
.attr("x",function(d,i){return 600+i*50;})
.attr("y",30)
.attr("width",40)
.attr("height",40)
.attr("fill","blue")
.on("mouseover",function(d) {
d3.select(this).append("text")
.attr("y", "100")
.attr("x", "500")
.attr("class", "hover")
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.style("fill", "black")
.text(function(d){console.log("mouseover");
return "Text I want";})
})
.on("mouseout", function(d) {
d3.select(this).select("text.hover").remove();
})
.on("click",function(d){console.log(d);
if(d==1)
Pie(array1,array2);
if(d==2)
Pie(array3,array4);
if(d==3)
Pie(array5,array6);
})
.style("opacity",1e-6)
.transition()
.duration(1000)
.style("opacity",0.8);
The console.log("mouseover") appears at the console, but no text is shown at the browser. The click event works with pie charts being constructed. Can anybody spot what is going wrong? Thank you in advance.
In your mouseover:
d3.select(this).append("text")
would append the text to the rect but rect elements can not have children.
Changing it to:
svg.append("text")
works. Full code example:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>
<body>
<script>
var svg = d3.select('body')
.append('svg')
.attr('width', 500)
.attr('height', 500);
svg.append("g").selectAll("rect")
.data([1, 2, 3])
.enter()
.append("rect")
.attr("x", function(d, i) {
return 10 + i * 50;
})
.attr("y", 30)
.attr("width", 40)
.attr("height", 40)
.attr("fill", "blue")
.on("mouseover", function(d) {
svg.append("text")
.attr("y", "100")
.attr("x", "200")
.attr("class", "hover")
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.style("fill", "black")
.text(function(d) {
console.log("mouseover");
return "Text I want";
})
})
.on("mouseout", function(d) {
svg.select("text.hover").remove();
})
.on("click", function(d) {
console.log(d);
if (d == 1)
Pie(array1, array2);
if (d == 2)
Pie(array3, array4);
if (d == 3)
Pie(array5, array6);
})
.style("opacity", 1e-6)
.transition()
.duration(1000)
.style("opacity", 0.8);
</script>
</body>
</html>
I think you should use d3-tip module for d3. It provides very nice hover tooltip
http://bl.ocks.org/Caged/6476579
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
})
and on bars or rectangles use
.on('mouseover', tip.show)
.on('mouseout', tip.hide)

Image not showing on iPad d3js

I'm using d3js along with AngularJS in an iPad webapp. When running on Safari/Chrome everything looks good, but when running on the iPad the images I append with d3js do not show.
Here is my JS:
directive('zoomScreen', [function() {
return{
restrict: 'E',
link: function(scope, elm, attrs) {
var width = 1024,
height = 660;
var offset= [{"xoff":-20,"yoff":10,"swipe_class":"left"},{"xoff":-80,"yoff":0,"swipe_class":"right"},{"xoff":0,"yoff":-80,"swipe_class":"left"},{"xoff":50,"yoff":0,"swipe_class":"left"}];
var svg = d3.select("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var back = svg.append("image")
.attr("class", "logo")
.attr("x", 375)
.attr("y", 175)
.attr("xlink:href", "../images/brain-back.png")
.attr("height", 300)
.attr("width", 300)
.style("fill", "transparent")
.style("stroke", "black")
.style("stroke-width", 1)
.on("click", outClicked);
var image = svg.append("image")
.attr("class", "logo")
.data([offset[0]])
.attr("x", 485)
.attr("y", 175)
.attr("height", 90).attr("width", 90)
.attr("xlink:href", "../images/image1.png")
.style("stroke", "black")
.style("stroke-width", 1)
.on("click", clicked);
var image2 = svg.append("image")
.attr("class", "logo")
.data([offset[1]])
.attr("x", 545)
.attr("y", 255)
.attr("height", 90).attr("width", 90)
.attr("xlink:href", "../images/image2.png")
.style("stroke", "black")
.style("stroke-width", 1)
.on("click", clicked);
And my HTML:
<zoom-screen>
<svg class="accel"></svg>
</zoom-screen>
The strange thing is the iPad knows there are elements there, because it allows me to highlight and click them, but it doesn't show the images.
Turns out all I had to do was convert image to base 64 string. So I just set the string as a var and had my xlink:href pointing to the var instead of the location. ex:
var image1 = "data:foobase64stringhere";
.attr('xlink:href',image1)

Categories

Resources