Having "visible overflow" inside of a GoJS node or graphObject - javascript

I want to have a shape inside of a node, which would be partly out of the boundaries of the node. Meaning, -10px top and left of the parent element.
Right now I have rectangle and a circle inside of a node and it looks like this:
As you can see, the link does not connect properly, since the size of the node has expanded. I would like the circle to be, using css terms, to be absolutely positioned, in other words, I don't want it to affect the node sizing the node (which is, obviously, invisible in this sample).
I have tried the following solutions:
Setting width and height to the node. Then it crops the circle, because it is out of the boundaries.
Using the fromSpot and toSpot properties in the node to connect the link to the center of the node. Apparently they are overridden by the layout, and I can't figure out how to disable isLayoutPositioned
Using adornments, but I don't understand at all how am I supposed to use them.
Searching if I could somehow set the overflow of the element visible, or to affect somehow the boundaries, or something like that, but have not found anything which would work for me.
What would be the proper solution here?

Make your Node a "Spot" Panel, make the "main" element of your node the "port" by assigning it a GraphObject.portId, and position the red circle relative to the "main" element by setting its GraphObject.alignment property, in this case to go.Spot.TopLeft. I'm also guessing that assigning the Node.locationObjectName is what you will want.
myDiagram.nodeTemplate =
$(go.Node, "Spot",
{ locationSpot: go.Spot.Center, locationObjectName: "BODY" },
$(go.Shape,
{ name: "BODY", width: 50, height: 50,
fill: "lightgreen", strokeWidth: 0,
portId: "" }),
$(go.Shape, "Circle",
{ alignment: go.Spot.TopLeft, width: 20, height: 20,
fill: "transparent", stroke: "red" })
);
Please read more at http://gojs.net/latest/intro/nodes.html. I recommend reading not only the Getting Started page, http://gojs.net/learn, but also all of the Introduction pages, http://gojs.net/intro, that apply to the kind of app you want to create.
In particular, these should be useful:
http://gojs.net/latest/intro/panels.html
http://gojs.net/latest/intro/tablePanels.html
http://gojs.net/latest/intro/ports.html
http://gojs.net/latest/intro/nodes.html

Related

Crop or Clip image to Circle using JointJS

I'm very new to both JointJS and SVG, so I am having a hard time interpreting some of the documentation for JointJS. I am trying to get randomly searched images to display in a circle for this project, in a graph that uses JointJS to display and link the images with arrows. I am convinced this shouldn't be as hard as I am making it, but I have spent hours going through the documentation, so I need help. From what I can tell, joint.shapes.standard.Circle elements cannot take an image as a background or fill. I would be really happy to use the .BorderedImage elements, but when I change the radius to make them a circle, the border changes without cropping the image. I also tried to use the .Image element and change the radius, and again the image didn't change. I am under the impression that I could add a clipPath definition to an .Image or .BorderedImage to force a circle, but I am not familiar enough with the syntax to be clear on where to do that, and none of the examples I have found on stackoverflow have given me enough information to do that. I tried using the .define method, and kept getting "cannot read property define of undefined" errors, so I know I wasn't using that right.
Here's what I have in the way of error-free code (rounded border that doesn't crop):
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: document.getElementById('myholder'),
model: graph,
width: 600,
height: 600,
gridSize: 1,
// makes code not draggable
interactive: { elementMove: false, arrowheadMove: false }
});
var borderedImage = new joint.shapes.standard.BorderedImage();
borderedImage.resize(100, 100);
borderedImage.position(100, 100);
borderedImage.attr('root/title', 'joint.shapes.standard.BoarderedImage');
borderedImage.attr('label/text', 'Monster\nImage');
borderedImage.attr('border/rx', "50%");
borderedImage.attr('image/xlinkHref', './assets/images/monster.svg');
borderedImage.addTo(graph);
The code I tried for .define looked like:
joint.shapes.Element.define('standard.BorderedImage', {
attrs: {
body: {
rx: "50%"
}
}
})
Some of the resources I have looked at and couldn't figure out how to use correctly are:
Putting multiple films in a circle in Raphael/Joint.js
How to set background image for a rectangle in JointJs?
Using predefined SVG file for creating a custom JointJS shape with ports
https://resources.jointjs.com/docs/jointjs/v2.1/joint.html#dia.Paper.prototype.properties

jVectorMap renders at the wrong size and there does not appear to be a way to change it

I'm using jVectorMap to create a map inside of a div.
However, no matter what I do, the map takes up only a small portion of the div. It seems that it is due to <svg style="width: 100px; height: 100px;">
I have tried setting the size on the containing div, I've tried various css solutions, but it still doesn't allow me to resize. The background color resizes, but the SVG element simply does not.
How do I resize the SVG element with jVectorMap?
Here is my script:
<script>
$('#map').vectorMap({
map: 'world_mill_en',
regionsSelectable: 1,
regionStyle: {
initial: {
fill: 'white',
"fill-opacity": 1,
stroke: 'none',
"stroke-width": 0,
"stroke-opacity": 1
},
hover: {
"fill-opacity": 0.8
},
selected: {
fill: 'blue'
},
selectedHover: {
}
}
});
</script>
the same issue happened to me, this is exactly as you say, because the container width and height are set to 100%, but then wrong evaluated to 100px.
I changed this in my custom css to:
.jvectormap-container {
width: inherited;
height: inherited;
}
and also changed the jquery-jvectormap.2.0.2.js starting at line 2315 to get the height of my container in the function updateSize().
Then, i set width and height of the container in px with javascript in the window.resize event.
You may experience also this issue when the map is initialized in a secondary hidden page, for example in a single page webapp, because the calculated width and height are not yet accessible.
Hope this helps.
The SVG won't automatically resize unless it has a viewBox attribute. You will need to add one. Exactly what its values need to be will depend on the contents of the SVG.
Once you have added a viewBox, you will need to remove the width and height values (or set them to "100%" - which has the same effect).
You may also need to adjust the preserveAspectRatio attribute. It controls the scaling behaviour.

How to minimize whitespace around Baidu's echarts

I'm trying to incorporate Baidu's echarts (which look really good). However, there is a lot of whitespace around the actual graph when one doesn't set a title nor uses their toolbar. Is there a way to have the graph/chart use more of the canvas?
My current solution to add an extra inside the container one and then set it's width and height to be be bigger by the margins I want to remove and the offset it by setting 'top' and 'left' to negative values of the respective margins. Not elegant and more importantly, not robust, but it works for the moment.
In ECharts 4, 5
As mentioned by some other posters, the correct way to get rid of the whitespace is to change options.grid.
https://echarts.apache.org/en/option.html#grid
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0
}
In ECharts 4, the names of the grid properties have been changed to left, right, top, and bottom.
Thanks to the answers above for pointing me in the right direction!
Further, changing the option.legend, as suggested above, had no effect on my chart.
You can use the properties defined on the grid (x, y, x2 and y2).
These properties are mentioned on the documentation: http://echarts.baidu.com/doc/doc-en.html#Grid
In ECharts 3 you can use the options grid.left, grid.top, grid.right and/or grid.bottom. According to the documentation, left and right default to 10%, and top and bottom default to 60 (px).
Documentation: https://ecomfe.github.io/echarts-doc/public/en/option.html#grid.
const option = {
// these are the grid default values
grid: {
top: 60,
bottom: 60,
left: '10%',
right: '10%',
},
// your other options...
}
Adding values to your themes grid object, like so:
var theme = {
grid: {
x: 40,
y: 20,
x2: 40,
y2: 20
}
}
legend: {
padding: 0,
itemGap: 0,
data: [' ', ' ']
},
In here we can just simply remove the padding of the legend. even though you are not specifying one, it is taking the default values. Unfortunately, eCharts doesn't give flexible option of setting chartArea through options.
In google Charts you can mention it 100% and it'll cover all the available area. I tried the above mentioned work around and could cover a bit more space after that.
in Echart u can make chart/graph with combination of the chart, and thre is too many config for every charts section, like legend, etc... just have look at their api documantation on their web site and Example page (Combinations part)

KineticJS move Textpath

Is there an easy way to move a Textpath from its initial position? I've had no problems moving Shape with a simple increase to its X and Y attributes, but it seems it doesn't work for Textpath. I've also tried resetting its data attribute (doesn't work for some reason), or recreating it entirely (works, but for some reason disappears right after, maybe because the trigger to move it is a mouseover on a Shape?). Basically, I'd need to easiest way to move it based on its previous position (so I can just += -= the coordinates).
Text Paths don't really move like other nodes. The data attribute is what determines the points that are displayed, regardless of the node's actually x/y position. As you noted, changing the data attribute doesn't work (plus who wants to recalculate all of those points for every movement?)
Since the points in the data attribute are relative to the node's parents, I think the easiest method would be to wrap the Text Path in a group and then move the group around using .move() or .setPosition() as needed.
Example (code adapted from the Text Path Tutorial):
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 220
});
var layer = new Kinetic.Layer();
var textpath = new Kinetic.TextPath({
x: 100,
y: 50,
fill: '#333',
fontSize: '24',
fontFamily: 'Arial',
text: 'All the world\'s a stage, and all the men and women merely players.',
data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50'
});
var group = new Kinetic.Group();
group.add(textpath);
group.move({x:50, y:50});
layer.add(group);
stage.add(layer);

Correctly change SVG line coordinate using jQuery

I'm trying to change one of the Y-coordinates of an SVG line, I'm using jQuery and the SVG plugin + animation plugin. I have been animating the lines previously, but here the function needs to simply change the position,
this works;
$(strings[i]).animate({
svgY1 : 150
}, 0);
this does not;
$(strings[i]).attr(
'svgY1', '150'
);
I can see I shouldn't be using animate here, but I don't know why attr or css don't work in this context? I figure the problem is that svgY1 isn't the correct way to identify that coordinate maybe but I'm stuck.
At this point all concerned elements are static, I'm pretty sure it's not interference from another function.
First, give the lines unique identifiers:
svg.line(g, 450, 120, 550, 20, {strokeWidth: 5, id: '123'});
Now use the change function of the svg manager:
svg.change(svg.getElementById('123'), { y1: 150 });

Categories