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)
Related
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>
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.
I'm working on some D3 visualizations and what I've found is that I'm having to define a lot of styles in my code - that really I'd prefer to have just in my CSS.
The reason for doing this is simply to support transitions. I've found that I can run a transition from a style applied in CSS to an inline one, but then I can't remove that style back to the original. Instead all of them need to be in-line. Like in the following example:
var svg = d3.select("svg");
var c1 = svg.append("circle")
.attr("class", "red")
.attr("r", 25)
.attr("cx", 50)
.attr("cy", 50);
var c2 = svg.append("circle")
.attr("r", 25)
.attr("cx", 250)
.attr("cy", 50)
.style("fill", "red");
svg.selectAll("circle")
.transition()
.delay(2000)
.duration(2000)
.style("fill", "blue");
c1.transition()
.delay(5000)
.duration(2000)
.style("fill", "");
c2.transition()
.delay(5000)
.duration(2000)
.style("fill", "red");
.red {
fill: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="500" height="500">
</svg>
The circle on the left jumps straight back to red, while the one on the right transitions back.
What I'd like to do is transition the left circle back, without having to re-define the original colour I'm using from CSS in my Javascript code.
Does anyone know of an elegant way to achieve this?
So using Gilsha's answer I managed to figure out that you can actually grab the original CSS style later on so you don't need to save it. Seems even when the colour is blue, I can go back and grab the red colour:
c1.transition()
.delay(5000)
.duration(2000)
.style("fill", function(d) {
var selection = d3.select(this);
var currentStyle = selection.style("fill");
var defaultStyle = selection.style("fill", null).style("fill");
selection.style("fill", currentStyle");
return defaultStyle;
});
var svg = d3.select("svg");
var c1 = svg.append("circle")
.attr("class", "red")
.attr("r", 25)
.attr("cx", 50)
.attr("cy", 50);
var c2 = svg.append("circle")
.attr("r", 25)
.attr("cx", 250)
.attr("cy", 50)
.style("fill", "red");
svg.selectAll("circle")
.transition()
.delay(2000)
.duration(2000)
.style("fill", "blue");
c1.transition()
.delay(5000)
.duration(2000)
.style("fill", function(d) {
var selection = d3.select(this);
var currentStyle = selection.style("fill");
var defaultStyle = selection.style("fill", null).style("fill");
selection.style("fill", currentStyle);
return defaultStyle;
});
c2.transition()
.delay(5000)
.duration(2000)
.style("fill", "red");
.red {
fill: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="500" height="500">
</svg>
Try this code.
var color = c1.style("fill");
var svg = d3.select("svg");
var c1 = svg.append("circle")
.attr("class", "red")
.attr("r", 25)
.attr("cx", 50)
.attr("cy", 50);
var c2 = svg.append("circle")
.attr("r", 25)
.attr("cx", 250)
.attr("cy", 50)
.style("fill", "red");
//Get fill color from css
var color = c1.style("fill");
svg.selectAll("circle")
.transition()
.delay(2000)
.duration(2000)
.style("fill","blue");
c1.transition()
.delay(5000)
.duration(2000)
.style("fill", color);
c2.transition()
.delay(5000)
.duration(2000)
.style("fill", "red");
.red {
fill: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="500" height="500">
</svg>
I have a feeling that my main problem is that I just don't know what question to ask. I hope that your suggestions to solve this example problem will point me in the right direction to handle situations like these.
Here's a very simple example I just threw together for the sake of illustration:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body style="background-color:black;">
<div id="viz"></div>
<script type="text/javascript">
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);
svg.selectAll("circle")
.data([0])
.enter()
.append("circle")
.attr("cx", 250)
.attr("cy", 250)
.attr("r", 30)
.attr("fill", "white");
var m = svg.selectAll("circle.moving")
.data([0])
.enter()
.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 10)
.attr("fill", "red");
repeat();
function repeat() {
m.transition()
.duration(1000)
.ease("linear")
.attr("cx", function(d) { return Math.floor(Math.random()*450);})
.attr("cy", function(d) { return Math.floor(Math.random()*450);})
.each("end", repeat);
}
</script>
</body>
</html>
(source: andrewlaprise.com)
Now let's say I wanted to have something occur every time the red circle collides with the white circle. What if there were a lot of white circles? What if there were a dynamic number of white circles whose positions were controlled by the user?
Should I use some kind of event? I'm new to event-driven programming and I don't have an intuition for it yet.
I suspect the answer to this question will open a lot of doors for me (and at least tell me what I need to google). How should I best listen for that collision?
I'm pretty new to d3 and have been following this tutorial: http://christopheviau.com/d3_tutorial/
I'm stuck on the 'Binding Data' example - it's pretty simple but the code just won't produce anything. I've poked around here and haven't found the question listed so I thought I'd ask away.
Here's the code:
var dataset = [],
i = 0;
for(i = 0; i < 5; i++) {
dataset.push(Math.round(Math.random() * 100));
}
var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 400)
.attr("height", 75);
sampleSVG.selectAll("circle")
.data(dataset)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("height", 40)
.attr("width", 75)
.attr("x", function (d, i) {
return i * 80
})
.attr("y", 20);
Other examples on the site work fine.
Thanks in advance - any ideas would be appreciated.
Unfortunately the code listed in the tutorial is incorrect. The svg element "circle" is specified by three attributes, "cx", x-axis coordinate of the center of the circle, "cy", y-axis coordinate of the center of the circle, and "r", the radius of the circle. I got this information from the w3 specification for an SVG circle.
I would recommend inspecting the JavaScript in the tutorial page to help iron out any other inconsistencies. Here it is:
<script type="text/javascript">
var dataset = [],
i = 0;
for(i=0; i<5; i++){
dataset.push(Math.round(Math.random()*100));
}
var sampleSVG = d3.select("#viz5")
.append("svg")
.attr("width", 400)
.attr("height", 100);
sampleSVG.selectAll("circle")
.data(dataset)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", function(d, i){return i*80+40})
.attr("cy", 50)
.on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
.on("mouseout", function(){d3.select(this).style("fill", "white");})
.on("mousedown", animateFirstStep);
function animateFirstStep(){
d3.select(this)
.transition()
.delay(0)
.duration(1000)
.attr("r", 10)
.each("end", animateSecondStep);
};
function animateSecondStep(){
d3.select(this)
.transition()
.duration(1000)
.attr("r", 40);
};
</script>
I also created a JSFiddle which you can utilize to get the basic idea that the author of the tutorial is trying to convey, with respect to utilizing d3.js data, here.
svg circles use cx, cy, and r - not x, y, height, and width. I've correct the example code below:
var dataset = [];
for(var i = 0; i < 5; i++) {
dataset.push(Math.round(Math.random() * 100));
}
var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 400)
.attr("height", 400);
sampleSVG.selectAll("circle")
.data(dataset)
.enter().append("circle")
.style("stroke", "black")
.attr("r", 10)
.attr("cx", function (d, i) {
return i * 80 + 10;
})
.attr("cy", function (d, i) {
return d;
});
http://jsfiddle.net/q3P4v/7/
MDN on svg circles: https://developer.mozilla.org/en-US/docs/SVG/Element/circle