Develop Reference

SVG Map w/ JS- Changing the states of multiple paths on hover

I'm working on a clickable SVG map using the Raphael library and referencing details from this tutorial. I've also set up a working jsfiddle here. Basically, for each state in the map, I have paths defined for the map shape itself and for a state abbreviation label—in the case of the fiddle, I'm showing one state, PA, for demonstration purposes. I have separate arrays defined for "regions" and "labels". Currently, I have the hover state working for the state shape (changing its color to a dark blue), but would also like the state abbreviation label to change to white while hovering on the state.
I have the following arrays and loop defined to handle the hover and click events for the regions (shapes), and I would like to add logic that finds the matching label and changes its fill attribute to white on hover (and reverts on mouseout):
// REGION ARRAY
var regions = {};
regions["pennsylvania"] = {href: "#", path: map.path("path here")};
// LABEL ARRAY
var labels = {};
labels["pennsylvania"] = {href: "#", path: map.path("path here")};
// REGION STYLES
var animationSpeed = 500;
var shapeStyle = {
fill: "#cdd6e9",
stroke: "#fff",
"stroke-width": 0.25,
"stroke-linejoin": "round",
cursor: "pointer"
};
var hoverStyle = {
fill: "#0a3a62"
}
// REGION LOOP
for (var regionName in regions) {
(function(region) {
region.path.attr(shapeStyle);
region.path[0].addEventListener("mouseout", function() {
region.path.animate(shapeStyle, animationSpeed);
}, true);
region.path[0].addEventListener("mouseover", function() {
region.path.animate(hoverStyle, animationSpeed);
}, true);
region.path[0].addEventListener("click", function() {
location.href = region.href;
}, true);
})(regions[regionName]);
}
Thus, in looping through the regions array, how would I adjust the script to find the matching label in the labels array and change its fill state? Thanks for any insight here.

Set the label events while you're setting your region events so you can match on the regionName. You can either use the let keyword on your for loop or you can pass the regionName or both (regions[regionName],labels[regionName]) to the immediate function as #Ian suggested.
var labelHoverStyle = { // add
fill: '#FFFFFF'
}
var labelStyle = {
fill: "#0a3a62",
stroke: "#0a3a62",
"stroke-width": 0.25,
"stroke-linejoin": "round",
cursor: "pointer"
}
Using Let
for(let regionName in regions) { // notice the variable declaration
(function (region) {
if (regionName == "district-of-columbia") {
region.path.attr(shapeStyle2);
region.path[0].addEventListener("mouseout", function() {
region.path.animate(shapeStyle2, animationSpeed);
labels[regionName].path.animate(labelStyle, animationSpeed);
}, true);
} else {
region.path.attr(shapeStyle);
region.path[0].addEventListener("mouseout", function() {
region.path.animate(shapeStyle, animationSpeed);
labels[regionName].path.animate(labelStyle, animationSpeed);
}, true);
}
region.path[0].addEventListener("mouseover", function() {
region.path.animate(hoverStyle, animationSpeed);
labels[regionName].path.animate(labelHoverStyle, animationSpeed);
}, true);
region.path[0].addEventListener("click", function() {
location.href = region.href;
}, true);
})(regions[regionName]);
}
Passing regionName or (regions[regionName],labels[regionName])
for(var regionName in regions) {
(function (region, label) { // notice the parameters
if (region.href.indexOf('district-of-columbia') > -1) {
region.path.attr(shapeStyle2);
region.path[0].addEventListener("mouseout", function() {
region.path.animate(shapeStyle2, animationSpeed);
label.path.animate(labelStyle, animationSpeed);
}, true);
} else {
region.path.attr(shapeStyle);
region.path[0].addEventListener("mouseout", function() {
region.path.animate(shapeStyle, animationSpeed);
label.path.animate(labelStyle, animationSpeed);
}, true);
}
region.path[0].addEventListener("mouseover", function() {
region.path.animate(hoverStyle, animationSpeed);
label.path.animate(labelHoverStyle, animationSpeed);
}, true);
....
})(regions[regionName], labels[regionName]); // notice the arguments
}

How to access the index position i in the drag stop handler of snapsvg

I'm grouping a few elements using snapSVG's group method, pushing them to an array and applying the drag method on the array elements by looping through each element.
Could you please help me in accessing the index postion of the dragged element (grps[i]) in the drag stop handler.
g1 and var g2 are the two gropus.
grps is the array that holds the two groups.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
</head>
JavaScript
var s = Snap(800, 600);
var grps = [];
var objects = [];
var red = s.rect(50, 50, 200, 200).attr({
fill: "red"
});
var green = s.rect(60, 60, 100, 100).attr({
fill: "green"
});
var g1 = s.group(red, green);
grps.push(g1);
var red = s.rect(300, 50, 200, 200).attr({
fill: "red"
});
var green = s.rect(310, 60, 100, 100).attr({
fill: "green"
});
var g2 = s.group(red, green);
grps.push(g1, g2);
var drag_move = function(dx, dy) {
this.attr({
transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
});
};
var drag_start = function() {
this.data('origTransform', this.transform().local);
};
var drag_stop = function(i) {
console.log("finished dragging");
console.log(i);
};
for (i = 0; i < grps.length; i++) {
grps[i].drag(drag_move, drag_start, drag_stop);
}
JsBin Link: http://jsbin.com/tonazosicu/10/edit?js
Thanks

You can using Function.prototype.bind() to preset some parameters like below
for (i = 0; i < grps.length; i++) {
grps[i].drag(drag_move, drag_start, drag_stop.bind(null, i));
}
Then on drag_stop you can access them like below.
var drag_stop = function(index, event) {
console.log("finished dragging");
console.log(index);
console.log(event);
};

One can achieve the same thing (in lastest versions of Snap I think) with...
grps.ForEach( function( el, i ) {
el.drag(drag_move, drag_start, drag_stop.bind(null, i))
};
But ultimately you don't need to use i, if you just use 'this' in the handler in most cases, and can simply do....
grps.ForEach( function( el ) {
el.drag(drag_move, drag_start, drag_stop)
};

Adding elements in bulk on JointJS leads to performance issues

We are trying to build a Visualization Framework using JointJS (we are not using Rappid). SVG is used to render graphical data on the browser.
We have a scenario where we have a model with approximately 4500 ports.
We have used ports as elements and NOT as attributes. Meaning to say that we have embedded ports as cells inside a model. There is a certain reason why need such a setup.
When such a model is added onto the graph, it takes roughly 8 to 9 seconds to render. Once the model is rendered, moving and repositioning the model works okay. However, when we try to add further models the browser tends to crash.
This is how we have created the Paper object
function createPaper(options) {
var paper = new joint.dia.Paper({
el: options.el,
width: options.width,
height: options.height,
model: options.graph,
gridSize: 1,
label:options.name,
async : { batchSize: 250}
});
return paper;
}
This is how we have created the model
function createModel(options) {
var model = new joint.shapes.devs.Model({
position:options.position,
size:options.size,
attrs: options.attrs
});
return model;
}
This is how we have created the port as a custom model
joint.shapes.custom = {};
joint.shapes.custom.Port = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
markup: '<g class="rotatable"><g class="scalable"><path class="port-body" d = "M 0 0 L 0 0 L 15 5 L 0 10 L 0 10 z"></path></g><text class="port-label"/></g>',
defaults: joint.util.deepSupplement({
type: 'devs.Port',
size: { width: 10, height: 10 },
position : {x : 0, y : 0},
attrs: {
'.': { magnet: false },
'.body': {
width: 150, height: 250,
stroke: '#000000'
},
'.port-body': {
r: 5,
magnet: true,
stroke: '#000000',
fill : 'yellow'
},
text: {
'pointer-events': 'none'
},
}
}, joint.shapes.basic.Generic.prototype.defaults),
}));
joint.shapes.custom.PortView = joint.dia.ElementView.extend(joint.shapes.basic.PortsViewInterface);
function createPort(options){
var port=new joint.shapes.custom.Port({
position:options.position,
size:options.size,
attrs: options.attrs
});
return port;
}
Below is the way we are adding models and ports to the graph
var cells = [];
var model = createModel(options);
//Add the cell to the graph
cells.push(model);
var totalInports=options.inPorts.length;
var totalOutports=options.outPorts.length;
//Add the inports
for (var portIndex = 0; portIndex < totalInports; portIndex++) {
port = createPort(options.inPorts[portIndex]);
model.embed(port);
cells.push(port);
}
//Add the outports
for (var portIndex = 0; portIndex < totalOutports; portIndex++) {
port = createPort(options.outPorts[portIndex]);
model.embed(port);
cells.push(port);
}
graph.addCells(cells);
Could anybody kindly give some answers to the below questions -
Are we using the paper and models in the right way ?
Are there better ways of adding cells to the graph which could improve the
performance ?
Thanks in Advance

I know that this is an old question that has been left unanswered for a long time. My take is to use:
graph.fromJSON or graph.addCells(/*Array of json cells*/)
Then, try to translate all the operations as a compound json that will be passed to graph.fromJSON or graph.addCells.

Raphael JS - .animate .text and .path at the same time

I've been working on scaling different areas of a SVG chart using Raphael js. I have all of the elements (.paths) scaling the way I want but I need to scale text in conjunction these scalable elements and also need to add .attr to the text. Can I scale a .path and .text simultaneously upon hover? Can someone look at my jfiddle and let me know how I could achieve this? Thank you!!
var w = 600;
var h = 600;
var paper1 = Raphael("box");
paper1.setViewBox(0,0,w,h,false);
paper1.setSize('100%', '100%');
var ONEgrp = paper1.set();
var ONE = paper1.path("M340.1064,218.2627l97.8281-75.5117c-39.5898-48.9438-100.123-80.2485-167.9785-80.2485V186.019C298.0166,186.019,323.1533,198.5244,340.1064,218.2627z");
ONE.attr({parent: 'ONEgrp',fill: "#EFA35A",stroke:"#fff",'stroke-width':1, cursor: 'pointer'}).data('id', 'ONE');
var ONEtxt = paper1.text(340, 145, "Total Rewards\nManagement\nT1/GR1");
ONEtxt.attr('fill', '#000');
ONEtxt.attr('font-size', '12px');
ONE.mouseover(function(){
if(!ONE.data("over")) {
ONE.attr('opacity',
ONE.attr('opacity')*0.90);
ONE.toFront();
ONE.data("over",true);
ONEtxt.toFront();
}
});
ONE.mouseout(function(){
ONE.attr('opacity',1);
ONE.data("over",false);
ONEtxt.toFront();
});
ONEtxt.mouseover(function(){
if(!ONEtxt.data("over")) {
ONEtxt.attr('opacity',
ONEtxt.attr('opacity')*0.90);
ONEtxt.toFront();
ONEtxt.data("over",true);
}
});
ONEtxt.mouseout(function(){
ONEtxt.toFront();
ONEtxt.attr('opacity',1);
ONEtxt.data("over",false);
});
var rsrGroups = [];
function hovering(e){
this.animate({
transform: 's1.2' }, 100, "elastic");
}
function hoverout(e){
this.animate({
transform: 's1' }, 101);
}
ONE.mouseout(hoverout);
ONE.mouseover(hovering);
ONEtxt.mouseout(hoverout);
ONEtxt.mouseover(hovering);

You can make a function thats called, which animates both separately. You may need to tie the element and the text somehow in the function IF the handler will be a generic one for lots of different elements, whereas its currently hardcoded.
I've also added the following CSS...to stop the text element stealing focus.
jsfiddle
text {
pointer-events: none;
}
function ONEtxtAnimate() {
if(!ONE.data("over")) {
ONE.attr('opacity',
ONE.attr('opacity')*0.90);
ONE.toFront();
ONE.data("over",true);
ONEtxt.animate({ opacity: 1 },100);
ONEtxt.toFront();
}
};
function ONEtxtAnimateOff() {
ONE.attr('opacity',1);
ONE.data("over",false);
ONEtxt.toFront();
ONEtxt.animate({ opacity: 0.2 },100);
}
ONE.mouseout(hoverout);
ONE.mouseover(hovering);
function hovering(e){
this.animate({
transform: 's1.2' }, 100, "elastic");
ONEtxtAnimate();
}
function hoverout(e){
this.animate({
transform: 's1' }, 101);
ONEtxtAnimateOff();
}

I have an update to this. Ian helped a ton got me off to a great start. I ended up elaborating this one a bit so I wanted to post the update because it might help others.
This also worked and I added a click for a link
var ONEgrp = paper1.set();
// Main Path ONE
var ONE = paper1.path("M340.1064,218.2627l97.8281-75.5117c-39.5898-48.9438-100.123-80.2485-167.9785-80.2485V186.019C298.0166,186.019,323.1533,198.5244,340.1064,218.2627z");
ONE.attr({parent: 'ONEgrp',fill: "#EFA35A",stroke:"#fff",'stroke-width':1, cursor: 'pointer'}).data('id', 'ONE');
// Text for ONE
var ONEtxt = paper1.text(340, 145, "Total Rewards\nManagement\nT1/GR1");
ONEtxt.attr('fill', '#000');
ONEtxt.attr('font-size', '14px');
ONEtxt.attr('font-family', 'Helvetica, Arial, sans-serif');
ONEtxt.attr('font-weight', 400);
// ONE mouseover
var mouseover_anim = Raphael.animation({transform: 's1.2' }, 100, "elastic");
// ONEtxt mouseover
var mouseout_anim = Raphael.animation({transform: 's1.2' }, 100, "elastic");
// ONE mouseout
var mouseover_anim2 = Raphael.animation({transform: 's1' }, 100, "elastic");
// ONEtxt mouseout
var mouseout_anim2 = Raphael.animation({transform: 's1' }, 100, "elastic");
ONE.mouseover(function(){
ONE.animate(mouseover_anim);
ONEtxt.animateWith(ONE,mouseover_anim,mouseout_anim);
if(!ONE.data("over")) {
ONE.attr('opacity',
ONE.attr('opacity')*0.90);
ONE.toFront();
ONE.data("over",true);
ONEtxt.toFront();
ONEtxt.data("over",true);
}
if(!ONEtxt.data("over")) {
ONEtxt.toFront();
ONEtxt.data("over",true);
}
});
// ONE mouseout
ONE.mouseout(function(){
ONE.animate(mouseover_anim2);
ONEtxt.animateWith(ONE,mouseover_anim2,mouseout_anim2);
ONE.attr('opacity',1);
ONE.data("over",false);
ONE.data("over",false);
WhiteCircle.toFront();
badge.toFront();
badge2.toFront();
badge3.toFront();
badge4.toFront();
badge5.toFront();
badge6.toFront();
badge7.toFront();
badge8.toFront();
badge9.toFront();
});
var paper1Groups = [];
function hovering(e){
ONE.animate({
transform: 's1.2' }, 100, "elastic");
}
function hoverout(e){
ONE.animate({
transform: 's1' }, 100);
}
ONE.mouseout(hoverout);
ONE.mouseover(hovering);
// ONE url location // Change this link to change the location /
ONE.click(function() {
window.location.href = "/adimLink?id=18458";
});

Kineticjs Object Handling & Event Listener

I sell custom equipment and on my site, I have a flash tool where customers can assign colors to glove parts and see what it will look like.
I've been working on a HTML5 version of this tool, so the iPad crowd can do the same thing. Click here for what I've done,
I took kineticjs multiple picture loader and hacked it to load all the pics necessary to stage and the color buttons, which are multiple instances of the same image. In their example, it was only 2 images, so they var name each image, which were manipulative. My goal is to dynamically create variable, based on image name.
I'm using a for loop and if statements to position the parts according to their type. If the image being loaded is a button, the original instance is not added to the stage, but another for loop, with a counter, creates instances and put on the stage. The variable is part string+n (wht0). From here I initiate an eventlistener, when clicked is suppose to hide all glove parts pertaining to the option and show the appropriate color. That code I have already in my AS.
I created an eventlistener on the white buttons (first button) that when clicked, I set it to hide one of the white leather part of glove. But when I click the button, I get the error in console that the glove part (ex wlt_wht), I get an error stating that the object is not defined. But when the image was loaded the variable name came from the current array object being loaded.
I added another variable before the callback call, to convert the content of the array to a string and used the document.write to confirm that the object name is correct, but after creating the object its now [object object]. In flash, you manually assign the movie clip name and target.name is available if you call it.
How can I write the Image obj so I can control the object? In the doc there is a reference for id and name as properties of the object, but when I set these, it did not work with me. Sure, I could have manually created each Kinetic.Image(), but there's no fun in that.. especially with 191 images. Any tip on how I can get around this problem?
Checkout http://jsfiddle.net/jacobsultd/b2BwU/6/ to examine and test script.
function loadImages(sources, callback) {
var assetDir = 'http://dev.nystixs.com/test/inf/';
var fileExt = '.png';
var images = {};
var loadedImages = 0;
var numImages = 0;
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function () {
var db = sources[src].toString();
var dbname = db.slice(-0, -4);
if (++loadedImages >= numImages) {
callback(images, dbname);
}
};
images[src].src = assetDir + sources[src];
//images[src].src = assetDir+sources[src]+".png";
}
}
function initStage(images, db) {
var shapesLayer = new Kinetic.Layer();
var messageLayer = new Kinetic.Layer();
//Loading Images
var xpos = 0;
var ypos = 200;
for (var i in images) {
var glvP = i.slice(0, 3);
db = new Kinetic.Image({
image: images[i],
x: xpos,
y: ypos
});
if (glvP == "wlt") {
shapesLayer.add(db);
db.setPosition(186.95, 7.00);
//db.hide();
shapesLayer.draw();
} else if (glvP == "lin") {
shapesLayer.add(db);
db.setPosition(204.95, 205.00);
} else if (glvP == "plm") {
shapesLayer.add(db);
db.setPosition(311.95, 6.00);
} else if (glvP == "web") {
shapesLayer.add(db);
db.setPosition(315.95, 7.00);
} else if (glvP == "lce") {
shapesLayer.add(db);
db.setPosition(162.95, 3.00);
} else if (glvP == "thb") {
shapesLayer.add(db);
db.setPosition(63.00, 28.60);
} else if (glvP == "bfg") {
shapesLayer.add(db);
db.setPosition(167.95, 7.00);
} else if (glvP == "wst") {
shapesLayer.add(db);
db.setPosition(208.95, 234.00);
} else if (glvP == "fpd") {
shapesLayer.add(db);
db.setPosition(252.95, 82.00);
} else if (glvP == "bac") {
shapesLayer.add(db);
db.setPosition(0, 0);
} else if (glvP == "bnd") {
shapesLayer.add(db);
db.setPosition(196.95, 164.00);
} else {}
var rect = new Kinetic.Rect({
x: 710,
y: 6,
stroke: '#555',
strokeWidth: 5,
fill: '#ddd',
width: 200,
height: 325,
shadowColor: 'white',
shadowBlur: 10,
shadowOffset: [5, 5],
shadowOpacity: 0.2,
cornerRadius: 10
});
shapesLayer.add(rect);
// End of Glove Parts Tabs
//Load Color Buttons
if (glvP == "wht") {
xpos = -5.00;
bpos = 375;
var zpos = -5.00;
var tpos = -5.00;
db.setPosition(xpos, bpos);
//shapesLayer.add(db);
var n = 0;
for (n = 0; n < 12; n++) {
if (n < 4) {
var glvB = "wht" + n;
var btn = glvB;
glvB = new Kinetic.Image({
image: images[i],
width: 18,
height: 18,
id: 'wht0'
});
glvB.on('mouseout', function () {
blankText('');
});
glvB.on('mouseover', function () {
writeColors('White', btn);
});
glvB.on('click', function () {
console.log(glvB + " clicked");
wht.hide();
shapesLayer.draw();
});
glvB.setPosition((xpos + 20), bpos);
shapesLayer.add(glvB);
xpos = (xpos + 230);
}

You can use your .png image filenames to automate your color-button coding efforts.
No need to manually code 10 glove components X 21 colors per component (210 color buttons).
Assume you’ve split the each image URL (filename) to get the color and glove-type.
Then you can create all 210 color buttons with one piece of reusable code.
Demo: http://jsfiddle.net/m1erickson/H5FDc/
Example Code:
// Usage:
addColorButton(100,100,"red","fingers");
// 1 function to add 210 color-buttons
function addColorButton(x,y,color,component){
// create this button
var button=new Kinetic.Image({
x:x,
y:y,
image: imageArray[ color+"-color-button" ],
});
// save the color as a property on this button
button.gloveColor=color;
// save the glove component name as a property on this button
button.gloveComponent=component; // eg, "fingers"
// resuable click handler
// Will change the gloves "#fingers" to "red-fingers-image"
button.on("click",function(){
// eg. get the image "red-fingers-image"
var newImage = imageArray[this.gloveColor+"-"+this.gloveComponent+"-image"];
// eg. get the Kinetic.Image with id:”finger”
var glovePart = layer.find("#"+this.gloveComponent”][0];
// change the Kinetic id:finger’s image
// to the red-fingers-image
glovePart.setImage(newImage);
layer.draw();
});
layer.add(button);
}