d3.js find the path of a given object - javascript

I'm looking to see if there's a utility way to take a given svg element and find the corresponding path. The intent is to be able to trace an outline of the object similar to http://jsfiddle.net/Lqmzztw1/. I'd like to use a technique illustrated http://bl.ocks.org/duopixel/4063326 here since it seems to be close to what I want. I'm looking for this to be able to trace the outline of any polygon/shape/circle, etc. Is there a way to convert a given SVG element to its corresponding path in d3?
fiddle code
var svg = d3.selectAll('div').append('svg').attr({
height:500,
width: 500
});
var box = svg.append('rect').attr({
x: 20,
y: 20,
height:50,
width:50,
fill: 'blue'
});
box.on('click',function(){
var cornerBox = svg.append('rect').attr({
x:15,
y:15,
width:10,
height:10,
fill:'orange'
});
cornerBox.transition().attr({
x: 50+15
}).duration(150).transition().attr({
y: 50+15
}).transition().attr({
x:15
}).duration(150).transition().attr({
y:15
}).duration(150);
});

Related

Javascript plotly border radius how to

Is there an easy way to create a border radius for a plot in plotly module? I have tried this with no luck...
var trace1 = {
x: time,
y: scaledData,
mode: 'lines',
type: 'scatter'
};
var layout = {
xaxis: {type: 'date'},
yaxis: {title: 'Moisture %'},
width: 320,
height: 320,
margin: {l: 50, r: 30, b: 50, t: 65, pad: 10},
paper_bgcolor: '#79ff4d',
plot_bgcolor: '#c6ffb3',
borderRadius: '15px',
title:'Past 24 Hours'
}
return (
<Plot data={[trace1]}
layout={layout}
/>
);
I also tried the css method but I think I am doing something wrong here as well. I tried creating a div of same size and position and wrapping the plot in it. Then putting a radius on the div but it is behind my plot so it does me no good. Not sure how to do the css hack but I would accept this answer as well, although more work.
It may be possible to get the element by class name if you are displaying this in an HTML page. In my case the class was main-svg. In the javascript on your page use the following:
<script>
var plotDiv = document.getElementsByClassName('main-svg') //class name of plotly main area
plotDiv[0].style.borderRadius = "15px"; //or however round you want
</script>
I just came across this question as I had the same problem. I just wrapped the plotly plot div with a div and applied a css class with border-radius and overflow: hidden as mentioned before. That worked for me.

Fabric.js. Dynamic Pattern not working

A little bit frustrated here. I am trying to get dynamic patterns work as it shown on demo here http://fabricjs.com/dynamic-patterns.
I wrote function but it won't change pattern size once t is created.
I tried to assign img object to window array and change sizes and even inserted rescale operation at the end of the function, but my pattern still won't change its size.
I know i'm doing something wrong, but i cannot figure what.
Maybe it is Fabric.js version or canvas.requestRenderAll();
Please, let me know if you have any idea on how to deal with this problem.
Here is the code.
'setBackgroundItem':function(){
fabric.Image.fromURL(arr.image, function(img) {
var patternSourceCanvas = new fabric.StaticCanvas();
var to_set_width = canvas.getActiveObject().width; // avtorkoda
img.set({opacity: 0.9});
img.scaleToWidth(to_set_width);
w.fills.push(img);
patternSourceCanvas.add(img);
patternSourceCanvas.setDimensions({
width: to_set_width,// на ноуте клиента работает с этим. у меня без может)
height: Math.floor(to_set_width)
});
var texture = patternSourceCanvas.getElement();
var pattern = new fabric.Pattern({
source: texture,
repeat: 'no-repeat',
offsetX: 0,
offsetY: 0
});
var activeObject = canvas.getActiveObject();
var activeGroup = canvas.getActiveGroup();
activeObject.setFill(pattern);
img.scaleToHeight(40);
canvas.renderAll();
});
},
Thanks in advance.
A bit late to the party:
The documentation doesn't specify this, but in order to change the pattern width after you've applied it, you must disable caching on the object that the pattern was applied upon.
In your case:
activeObject.set('objectCaching', false);
Another place where it can be observed (from FabricJS's own example here):
canvas.add(new fabric.Polygon([
{x: 185, y: 0},
{x: 250, y: 100},
{x: 385, y: 170},
{x: 0, y: 245} ], {
left: 0,
top: 200,
angle: -30,
fill: pattern,
objectCaching: false
}));
You either do it like this, or you can make objectCaching false as a default for all the objects (not recommeded for heavy projects)

How to setup interactive and non-interactive objects in PhysicsJS?

I am trying to setup a seesaw with userdragable objects. After world creation in PhysicsJS, mouse drag interaction is added by
world.add( Physics.behavior('interactive', { el: renderer.el }) );
which works fine. Subsequently, I want some added objects to be draggable (the box objects). But the lever should not be draggable, but it should interact with the boxes. So the lever should rotate according to a replaced box. The fulcurm is placed in a noninteractive way by setting its treatment property to static:
world.add( Physics.body('convex-polygon', {
name: 'fulcrum',
x: 250,
y: 490,
treatment: 'static',
restitution: 0.0,
vertices: [
{x: 0, y: 0},
{x: 30, y: -40},
{x: 60, y: 0},
]
}) );
How can objects be interacting with each other, but only some are userdragable?
A fiddle is available at: http://jsfiddle.net/YM8K8/
At the moment this is not supported... but it should be. I've added it as a bug on github. https://github.com/wellcaffeinated/PhysicsJS/issues/101
In the meantime, if you want, you can create a new "interactive" behavior by copying and pasting and just change the name.
Physics.behavior('interactive-custom', function( parent ){ ...
Then in the grab function just make this small addition:
body = self._world.findOne({ $at: new Physics.vector( pos.x, pos.y ) });
Change to:
body = self._world.findOne({ $at: new Physics.vector( pos.x, pos.y ), $in: self.getTargets() });
What that does is when it's searching for the body at the mouse coordinates, it will also check to see if that body is in the set that you've applied this behavior to.
Then instead of adding the behavior before the bodies in your fiddle, add it at the end, and do this:
world.add(
Physics.behavior('interactive-custom', { el: renderer.el })
.applyTo(world.find({ name: 'box' }))
);
This will use world.find to find the bodies currently in the world that have the "box" name. Then it sends that array of bodies to the behavior and tells the behavior to only apply itself to those bodies.
Here's the modified fiddle:
http://jsfiddle.net/wellcaffeinated/YM8K8/1/

draw tokens in the circle with jointjs

I want to draw some tokens (small circle) in the circle via jointjs, how can I do it ?
This code draw a circle with the text "token" and I want to replace "token" by a circle.
var place =
new joint.shapes.basic.Circle({
id:'place1',
position: {x:100, y: 180},
attrs: {circle: {fill: '#FFFFFF'}, text: {text:'TOKEN', fill:'#000000'}}
});
This looks like a good candidate for the JointJS Petri Net shapes plugin (joint.shapes.pn.js). See a demo at: http://jointjs.com/demos/pn. You can download the plugin from here: http://jointjs.com/download. Then use:
var place = new joint.shapes.pn.Place({
position: { x: 140, y: 50 },
tokens: 1
});

How to add raphaeljs object in <div> tag

$(document).ready(function(){
$("#btnAO").live("click", function(){
$("#canvasdiv").append("<div id='id1' width='50px' height='50px'></div>");
$("#id1").append(new Raphael(document.getElementById('canvasdiv'), 900, 600).rect(30, 50, 80, 100).attr({
fill : "blue",
stroke : "black",
strokeWidth : 0,
r : 5
}));
});
});
i have tried this its add Raphael object in but it wont display on screen
Raphael renders into the container that you give it as the first argument. The return value is a Raphael paper object which you use for rendering. In short, just cut away $("#id1").append and it shows up.
$(document).ready(function(){
$("#btnAO").live("click", function(){
$("#canvasdiv").append("<div id='id1' width='50px' height='50px'></div>");
var paper = new Raphael(document.getElementById('canvasdiv'), 900, 600);
paper.rect(30, 50, 80, 100).attr({
fill : "blue",
stroke : "black",
strokeWidth : 0,
r : 5
});
});
});
Further more, since you're using jQuery anyway, you might want to replace document.getElementById('canvasdiv') with $('#canvasdiv').get(0) for consistency.
new keyword is not needed
var paper = Raphael(document.querySelector(target_css_selection_str), svg_width_int, svg_height_int);
Since you ask about what it returns. It returns a Paper object, which holds a reference to the new SVG element that it just built, via a property it calls "canvas".
...you should approve #Supr as the right answer btw, I am just adding a 2 cents.

Categories