I am trying to draw nested shapes with GoJS library. For now I have rectangle with a single line inside.
Whole Object is a panel with two shapes, a rectangle and a minus line. At this point it is fine, MinusLine is rendered in the center of a rectangle.
What I want to achieve is to position/change location of a MinusLine from top to bottom and etc. based on some conditions that I got however I cannot move it in any way.
For example move perfectly centered YELLOW line to position of RED or BROWN
Code looks like:
GO(go.Node, "Table",
{
layerName: "AfterForeground",
movable: false,
locationObjectName: "BODY",
locationSpot: go.Spot.parse("0.5 0 0 0 "),
selectionObjectName: "MAIN_SHAPE",
selectionObjectName: "MAIN_SHAPE",
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
GO(go.Panel,go.Panel.Position, "Auto", {
row: 1,
column: 1,
name: "BODY",
stretch: go.GraphObject.Fill
},
GO(go.Shape, "Rectangle", {
fill: wellColor,
name: "MAIN_SHAPE",
stroke: myColor,
strokeWidth: 0.4,
}, new go.Binding("fill", "wellColor"),
) , new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)
,GO(go.Shape, "MinusLine", {}), // <-- Move this YELLOW line vertically somehere inside Rectangle
)
Is a Table panel (for the Node's Panel type) really what you want?
So far you have a Table panel that has a single cell, and by default all objects in the cell will sit in the center. You can easily move them by adding the alignment property to the elements.
Here's an example of your table, with two sub-panels added to the Node, one aligned to the top, one aligned to the center with a y offset of 30:
https://codepen.io/simonsarris/pen/zYBrLaX?editors=1011
There are other positioning examples for Table panel, here:
https://gojs.net/latest/intro/tablePanels.html
https://gojs.net/latest/intro/tablePanels.html#StretchAndAlignmente
Note that as you have defined the template, the Shape takes up the entire space of the table, with a minus line in the center of the shape. This is probably not what you want. I put a width and height on the Shape and a (bigger) height on the table to make the demonstration legibile.
Related
Is it possible to blur a closed path element that has a fill using paperjs? Would I have to create an SVG feGaussianBlur primitive for each path that I wanted to blur? How would that affect performance if there were a few hundred path elements on the canvas? I thought about making use of the shadowBlur with some color magic, where the shadow would match the selected path, but it's not quite the same effect. I do not want to use raster.
A trick could be to use the shadowBlur property of the item.
The only thing is that the shadow is only drawn if the item has a fill.
And we don't want the fill to be displayed but only the shadow.
So we could make clever usage of blend modes to hide the fill but not the shadow.
Here's a simple sketch demonstrating this.
new Path.Circle({
center: view.center,
radius: 50,
shadowColor: 'black',
shadowBlur: 20,
selected: true,
// set a fill color to make sure that the shadow is displayed
fillColor: 'white',
// use blendmode to hide the fill and only see the shadow
blendMode: 'multiply',
});
edit
This technique indeed seems to reach a limit when trying to stack items on top of each other.
We can prevent the multiply blend mode from "bleeding out" by wrapping the item into a group which has a blend mode of source-over. This has the effect to scope the children blend modes.
But there is still a trick to find to compose the items together.
Here's a sketch demonstrating where I stopped my investigation.
I'm quite sure that you can find a solution following this track.
function drawBlurryCircle(center, radius, blurAmount, color) {
const circle = new Path.Circle({
center,
radius,
shadowColor: color,
shadowBlur: blurAmount,
// set a fill color to make sure that the shadow is displayed
fillColor: 'white',
// use blendmode to hide the fill and only see the shadow
blendMode: 'multiply'
});
const blurPlaceholder = circle
.clone()
.set({ shadowColor: null, fillColor: null })
.scale((circle.bounds.width + (blurAmount * 2)) / circle.bounds.width);
return new Group({
children: [circle, blurPlaceholder],
blendMode: 'source-over'
});
}
drawBlurryCircle(view.center, 50, 20, 'red');
drawBlurryCircle(view.center + 30, 40, 30, 'lime');
drawBlurryCircle(view.center + 60, 30, 30, 'blue');
I have this chart:
But it's a bit ambiguous as to which color belongs to which label. So I decided to add a little padding to the labels. In ChartJS documentations we have:
Name Type Default Description
padding number 10 Padding between rows of colored boxes.
So I double this number:
options: {
legend: {
position: "top",
labels: {
boxWidth: 5,
usePointStyle: true,
padding: 20
}
}
}
And I can see that it works:
But now it also adds padding to the top of the legend. To make the difference more noticeable, I'm going to exaggerate and set the padding to 50:
I'm trying add padding only between the labels of the legend, so that it's clear which box (colored circles) belong to which label. How can I do that?
I am wanting to move the tooltip downwards a few pixels instead of always at the top of each stack (on stacked bar chart).
I found this in the docs about positioners, but I cannot understand the structure of code and where it should actually go.
Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
var tooltip = this;
return {
x: 0,
y: -50
};
}
For reference, you can see where I've tried to place it here ( not much wonder why its not working )
Config seems to have a position and yPadding, neither of which seem to have effect I want when I put them in the tooltips options:
tooltips: {
yAlign: 'top',
position: 'nearest',
yPadding: 50
}
yPadding distorts the tooltip, I'm not sure why but it muddles up the caret and box.
How to set characterSpacing from pt/px?
How to set lineHeight from pt/px?
I just can not understand how to translate from points or pixels into a value for pdfkit. Help me please
https://github.com/devongovett/pdfkit
I need to convert html text to pdf. And you need to match the letter spacing and the line spacing.
CSS: Font - 18pt; LineHeight - 1.4 (not pt); letterSpacing - 2pt;
How to set this in pdfkit?
doc.text(element.content, element.left, element.top, {
width : element.width,
align : element.properties.textAlign,
characterSpacing : 2, //???
lineBreak : false,
lineGap : 1.4, //????
});
When using pdfKit, measurements are in points where 72 points is 1 inch.
So characterSpacing is how many "points" between each character. In the example provided of 2, it would be 2 points or 2/72 of an inch.
The lineGap, is the number of points between lines of text. For example, lineGap: 10 is 10/72 of an inch. This represents the space between the bottom of one row and the top of the subsequent row.
This is different than line-height in HTML, where line-height is more like a multiplier of the specified line height.
This is how it works for me, I hope it helps someone
doc
.fontSize(10)
.font('Helvetica-Bold')
.lineGap(5)
.text('your text', 50, 50, { align: 'right' });
// positioning of your text first 50 is for x, second for y
I started to learn C3.js. It is pretty good to work with.
I got stuck in this part, I hope anyone can help me to go forward .
How to create circle in outer of circle in line chart using c3.js .
This is my example code
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 150, 150, 250],
['data12', 30, 200, 100, 150, 150, 250]
],
type: 'line'
},
});
It is giving one small circle ( Dot kind of ) but I want to create one more circle with different color and inside of that circle I need to show this small circle (Dot Kind of ) .
How to do that?
I have tried to select all circle and apply border for that .I have tried like this
d3.selectAll('circle').each(function(){
this.style('border-radius: 20px;');
});
this is wrong way, also this is not working. How to do that ?
Is it possible in c3.js?
You can set the size of your point using chart options
...
point: {
r: 20
}
...
and you can draw a border by using CSS
#chart .c3-circle {
stroke: black;
stroke-width: 4;
}
(assuming you are drawing the chart in a container with ID chart)
Fiddle - http://jsfiddle.net/yhz8k5k9/