Trying to follow along the tutorial here, but there isn't enough code presented to me to bridge the gaps.
Here is the fiddle I am working on to accomplish the same thing, with d3 loaded, however, the animation transitions are not concurrently happening, let alone at all, it is just changing the attributes, something I am already familiar with in SVG hard coding with JQuery selectors. So where am I going wrong, or missing the boat?
// example code doesn't work
var circle = svg.selectAll("circle");
circle.style("fill", "steelblue");
circle.attr("cy", 90);
circle.attr("r", 30);
// this does, but animations don't work
d3.selectAll('circle').style("fill", "steelblue");
d3.selectAll('circle').attr("cy", 90);
d3.selectAll('circle').attr("r", 30);
I am eventually trying to leverage the tweening of d3, but I cant get the basics off the ground. Thanks for you help in advance....
In the example code, svg is previously assigned to a d3 selection object:
var svg = d3.select("#chart-2").append("svg")
.attr("width", w)
.attr("height", h);
Therefore, you can use it to select the child elements, as in the original example.
Eg. your fiddle could be rewritten like so:
var svg = d3.select("#svg");
//svg is now a d3.selection object.
svg.on("click", function() {
var circle = svg.selectAll("circle");
circle.style("fill", "steelblue");
circle.attr("cy", 90);
circle.attr("r", 30);
});
Something to note about binding events using d3:
Within the anonymous function:
The event is bound to d3.event
The dom element - not the d3.selection object - is bound to this
If you pass an argument to the function, it will be bound to the data which is joined to the element.
Not really code, but should show what I mean:
var someD3Selection = d3.select("#someElement");
someD3Selection.on("click", function(boundData) {
d3.event.preventDefault(); // <-- here's the event
this; // <-- the actual dom element which is selected in someD3Selection
d3.select(this); // <-- same as someD3Selection.
});
Is this what you're looking for? The duration is optional but it's easier to see what's happening when it's a bit slower.
$('#svg').on('click', function() {
d3.selectAll('circle').style("fill", "grey").transition().duration(5000).style("fill", "steelblue").attr("cy", 90).attr("r", 30);
});
Related
I am making an app that involves shapes like cylinders and boxes, and need to be able to do this with fabric.js. I know about three.js but for my purposes, it must be in 2D.
Initially I thought I would just create them in 3D software and render images which can then be added to the canvas, which I did successfully...
However, I have run into a hurdle where fabric only allows patterns to be filled onto paths or objects (rect, circle etc.)....not images (png).
Since I absolutely need patterns, I now need to create these cylinders in SVG. I have gotten as far as making the cylinders in Illustrator, saving them as SVG's and then using them on the canvas, then adding fill patterns on them. So far so good.
Now I want to be able to fill a different pattern for the top of the cylinder, and a different pattern to the side BUT still have it as one object.
So...How can I select and manipulate particular paths within a path group? Is there anyway to give each path within the group a custom attribute (eg. name) which I can then target? Do I need to create two seperate SVG files and then add them seperately, and if so, how can I do this and still have it as one object?
Here's how I am adding the svg to the canvas...
fabric.loadSVGFromURL("/shapes/50-250R.png", function(objects) {
var oImg = fabric.util.groupSVGElements(objects);
oImg.perPixelTargetFind = true;
oImg.targetFindTolerance = 4;
oImg.componentType = "Shape";
oImg.lockUniScaling = true;
oImg.lockScalingX = true;
oImg.lockScalingY = true;
oImg.setControlsVisibility({'tl': false, 'tr': false, 'bl': false, 'br': false});
canvas.add(oImg);
canvas.renderAll();
});
Here is how I am adding the pattern...
var textureIMG = new Image;
textureIMG.crossOrigin = "anonymous";
textureIMG.src = texture.image;
obj.setFill(); //For some reason, the fill doesn't happen without this line.
var pattern = new fabric.Pattern({
source: textureIMG,
repeat: 'repeat'
});
if (obj instanceof fabric.PathGroup) {
obj.getObjects().forEach(function(o) {
o.setFill(pattern);
});
} else {
obj.setFill(pattern);
}
canvas.renderAll();
Thanks in advance.
So I managed to figure this out. Each path within the path group is stored in the 'paths' array of the object.
I can now add a pattern to the top of the cylinder using...
var obj = canvas.getActiveObject();
obj.paths[0].fill = patternOne;
and to the sides using...
obj.paths[1].fill = patternTwo;
I'm new to phaser, and for the past few days I've been trying to make a really simple game, platformer-style, where the player must navigate to certain areas before being able to exit the level.
I have the basics running, but now I can't seem to figure out how to check if the player is in those areas.
The relevant part of the code so far is as follows:
var game = new Phaser.Game(800, 600, Phaser.AUTO, "mygame", {
preload: preload,
create: create,
update: update,
render: render
});
function preload() {
game.load.tilemap("questMap", "assets/quest.json", null, Phaser.Tilemap.TILED_JSON);
game.load.image("tilesheet", "assets/tilesheet.png");
game.load.image("npc", "assets/npc.png");
game.load.spritesheet("player", "assets/player.png", 64, 64);
}
var map;
var tileset;
var groundBg;
var props;
var houses;
var houseProps;
var npc;
var ground;
var areas;
var player;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.stage.backgroundColor = "#A8DBFF";
map = game.add.tilemap("questMap");
map.addTilesetImage("tilesheet");
map.addTilesetImage("npc");
ground = map.createLayer("ground");
groundBg = map.createLayer("groundbg");
props = map.createLayer("props");
houses = map.createLayer("houses");
houseProps = map.createLayer("houseprops");
npc = map.createLayer("npc");
map.setCollisionBetween(1, 5000);
ground.resizeWorld();
Not too pretty, I know.
I've created the map with tiled and there are a lot of small props and decorative tiles, hence the multiple "map.createLayer()" calls. The only one with collision is the ground layer.
Now, on my Tiled file, I've created an Object layer and drawn small rectangles on the areas I want to check if the player is in. I thought this was going to be an easy process but I can't seem to figure out how to load those areas into Phaser, and then check if the player is within bounds.
Googling has given me some results, but none seem to fit, as they usually cover how to add a sprite to an object, which in this case does not apply.
I simply need that small area to exist and check if the player is there. I've also given names to each of those rectangles in Tiled, via the custom properties tab.
I would try using a transparent image as the area you wish to check if your sprite is over and use
if(sprite1.overlap(transparentImage)){
//do something
}
I'm experimenting with Snap in order to use svg and need to be able to use the Maki icons defined in https://github.com/mapbox/maki.
My plan is to load the svg's I need, and then instantiate them for particular icons on a piece of Snap paper. But in order for this to work, I need to place the icon at a particular place on the paper, but I can't get translation to work. Neither one of the translation techniques below works; the code works as is, but always places the icon at the top left.
What am I missing? There's not enough documentation on Snap, and I don't know if the problem is with the way the Maki icon svg is defined, or my use of Snap.
var icon = Snap.load("maki/bicycle-24.svg", function(f) {
var g = f.select("g").clone();
// var g = f.select("#layer1").clone(); // also works
// g.transform("t120,120");
// var t = new Snap.Matrix();
// t.translate(120,120);
// g.transform(t);
paper.append(g);
});
The cloning needs to happen after the append, as when loading an svg in Snap its just a fragment.
So you will need to do something like...
paper.append(f);
var element = paper.select('#someId').clone();
element.transform( myTransform );
Thank you! That did the trick! And since Snap is so poorly documented, I'm going to insert the code here that allows a general solution.
// Base set from which markers are constructed
var iconSet = paper.group();
iconSet.attr({ class: 'hide' });
// Instantiations of icons
var markers = paper.g();
// Now, create SVG shape
var icon = Snap.load("maki/bicycle-24.svg", function(icon) {
// Add it to the icon set
iconSet.append(icon);
// Instantiate it and remove from main view
var element = paper.select('#svg4460'); // Copies it!
// var element = paper.select('#base'); // Selects something but doesn't work
// var element = paper.select('#layer1'); // Selects something but doesn't work
// var element = paper.select('#bicycle-24'); // Silent fail
element = element.clone();
element.remove();
// Clone this icon and move it
var t = new Snap.Matrix();
t.translate(10,120);
element.transform(t);
// Insert into main document view (markers)
markers.add(element);
});
I've got a little visualisation going where I have pairs of rectangles. Each pair shares the same id attribute. So currently, I've set it up so that if I hover over either one, both change colour. That's great, but, as I've done it, I need a new select("svg #whatever) command for each different pair. That can't be right.
So what I was thinking was setting up a variable, which would be the id of the element I was mousing over, then putting that inthe selct command, something like this
svg.selectAll("rect")
.on("mouseover", function(d) {
var thisid = d3.select(this).attr("id")
svg.selectAll("svg #"+thisid+)
.attr("fill", "red")
Except that doesn't work. Is it just the syntax - ie I've got the + + wrong - or am I making a fundamental mistake here?
Your idea is good, but as Robert Longson pointed out, you can't use id to link two related objects, since id has to be unique for the entire webpage.
You can, however, add any attribute you want to your data element (other than id) and preferably with an attribute name that starts "data-", and then use a CSS attribute selector to find other elements with the same attribute. Like this:
//when you create the rectangles:
rect.attr("data-id", function(d) {
return d.id;/* or however you figure out this id */
});
//Your event handler
svg.selectAll("rect")
.on("mouseover", function(d) {
var thisid = d3.select(this).attr("data-id")
svg.selectAll("svg rect[data-id='" + thisid + "']")
//note the single quotes inside double quotes
//the final selector should look like "svg rect[data-id='23']"
.attr("fill", "red");
});
The only downside it that browsers don't index all attributes for fast access like they do with classnames and ids, so it could be slow if you had a large number of rectangles and mouse-over them rapidly. Using a class would make selection faster, but adds a complication if you have multiple classes -- you can't just access the one class value you're interested in by calling .attr("class"). You could, however, re-access whichever data variable you are using to define data-id in the first place. Like this:
//when you create the rectangles:
rect.attr("data-id", function(d) {
return "data-rectangle " + /* any other classes you are adding, + */
"data-id-" + d.id;/* or however you figure out this id */
});
//Your event handler
svg.selectAll("rect")
.on("mouseover", function(d) {
var thisid = d.id; /* or however you figure out this id */
//d3 automatically passed the element's data object to your event handler
svg.selectAll("svg rect.data-id-" + thisid)
//the final selector should look like "svg rect.data-id-23"
.attr("fill", "red");
});
I'm not sure where to post this question, so please excuse me if I am violating any policies.
To clarify my question, I want to achieve the same navigation bar as Teehan + Lax's.
Here is their website: http://www.teehanlax.com/tools/
If you notice, the navigation auto hides itself when you scroll down, however when you scroll up it would show it self again.
So my question is, how did they achieve this? Is it through only CSS or do I need JavaScript to do this? Whatever way it is, can someone also point towards the right direction on how I can find the information to implement this?
Thank you
It's not possible to change position from fixed to absolute in pure CSS like you want, so I used some javascript to do so. Demo
function followTo(elem, pos) {
var element = document.getElementById(elem);
window.onscroll = function(e){
var disFromTop = document.all? iebody.scrollTop : pageYOffset;
if (disFromTop > pos) {
element.style.position = 'absolute';
element.style.top = pos + 'px';
} else {
element.style.position = 'fixed';
element.style.top = 0;
}
};
};
followTo("nav", 100);
It even includes an IE fix pulled from this SO post to get the correct scroll position
Here is the jQuery version, taken from this SO post
EDIT
As pointed out by zanona, I did not include the feature where the navigation appears if you scroll up from a place further down in the page. As a result, I create a new technique that uses a setInterval
var last = 0, // The last read top value
delay = 150, // The delay for the setInterval
threshold = 30; // The max scroll distance before showing/hiding the nav
//I always set a variable to my setIntervals in case I want to stop them later on
var navMovement = setInterval(function() {
var nav = document.getElementById('nav'), // Gets nav object
pageVertOffset = document.all? iebody.scrollTop : pageYOffset;
// Happens if the difference in scroll is below the negative threshold
if(pageVertOffset - last < -threshold) {
nav.style.top = "0px"; // Put the nav at the top of the window
}
// Happens if the difference in scroll is above the threshold
else if(pageVertOffset - last > threshold){
nav.style.top = - nav.offsetHeight + "px"; // Hides the navigation
}
last = pageVertOffset; // Updates the previous scroll value
}, delay); // Runs every `delay` amount
Javascript version, or if you prefer, jQuery version
I thought I recreated the site pretty well (but it's better because mine has a kitten, haha)