I have a custom shape composed of a body (a SVG path) and a label.
I want my links from one shape to another to be connected to the center of the body sub-element, and not the center of the bbox of the shape.
I tried to set a connectionPoint with a selector to the body, but it does not work. My best approach is to add sticky: true to force the link to point to the body, but this is not satisfying.
You can see in this CodePen with the source shape having sticky: true and the target shape having sticky: false.
Any help to make my link point to the center of my body element would be really appreciated.
You can use the magnetSelector attribute seen in the docs.
magnetSelector designates a sub-element as the target for the cell's magnet.
The following seems to work well in your codepen:
const shape1 = new Shape();
shape1.position(100, 100);
shape1.attr({ label: { text: "Shape 1" } });
shape1.addTo(graph);
const shape2 = new Shape();
shape2.position(500, 100);
shape2.attr({ label: { text: "Shape 2" } });
shape2.addTo(graph);
shape1.attr(['root','magnetSelector'], 'body');
shape2.attr(['root','magnetSelector'], 'body');
Related
i have i problem and tried different solutions, but no success.
I have an amChartXY chart, which has white labels and legend text is white, but when i want to build custom pdf report, i cannot convert those white text into black.
First i have a function which exports chart to base64 string, and i want there to convert the text color to black, but it won't work.
Here is a code snippet of a menu item, that converts to SVG that is saved to global array object.
menu: [
{
class: "",
label: "Save to draft",
click: function() {
var overrideObject = {
backgroundColor : "rgba(255,255,255,1)",
color : "#000",
legend : {
color : "#000"
}
};
var chartObject = this;
chartObject.capture(overrideObject, function () {
chartObject.toJPG({}, function (base64) {
// charts is global array
charts.push({
name: customName,
chart: base64
});
});
});
}
},
Here the overrideObject is changing the backgroundColor attribute with white ( before is was transparent ) but it's not changing font color. Also i have tried different attributes to add, but nothing seems to work.
Is this possible at capture time ?
Here are some images preview of what i want to accomplish :
AmChart for export isn't that well documented, so any feedback would be welcome
The overrideObject you're passing only accepts the same parameters listed in the list of export settings. If you need to change the appearance of specific elements on the chart, you need to use the reviver callback mentioned in the annotation settings section to selectively apply your modifications. For example, here's how to target the value axis labels:
"export": {
"enabled": true,
"reviver": function(nodeObj) {
if (nodeObj.className === 'amcharts-axis-label' && nodeObj.svg.parentNode.classList.contains('amcharts-value-axis')) {
nodeObj.fill = 'rgba(255,0,0,1)';
}
},
// ...
}
Note that you need to use SVG attributes to change the appearance, so you'll have to set the fill to change the color of the text element.
Codepen demo
Can anyone please help me understand how to add tooltip to the stencil shapes.
I can't find a way how to achieve this. I would love to give dynamic text if it allows.
You can define the tooltip when you define the shape through the '.' reference, example:
joint.shapes.devs.Model.define('app.MyShape', {
attrs: {
'.': {
'data-tooltip': 'My Shape',
'data-tooltip-position': 'bottom',
'data-tooltip-position-selector': '.joint-stencil'
},
// other properties ...
}
}
I'm working with RaphaelJS.
I've noticed that you can add dynamic data to the elements, for example:
to assign a value:
el.data("key",value);
to get a value:
el.data("key")
How can I copy this behaviour using JQuery or Javascript?
Hi I'm trying a wild guess here: as I understand correctly you'd like to communicate from Rapahel to jQuery.
The best I've come up so far is to keep references of both and use them accordingly as Raphael seems not to insert data into dom directly (apart from ID attribute):
$(document).ready(function () {
var paper = Raphael("div", 400, 150);
var circle = paper.circle(80, 80, 30).data('title', 'Red dot').attr({
fill: '#f00'
});
circle.node.id = 'my_circle';
$el_circle = $(circle[0]); // get DOM element out of Rapahel's object
$el_circle.on('click', function () {
// use Raphael reference:
alert("My is title: " + circle.data('title'));
});
});
http://jsfiddle.net/saxxi/Z35NV/
References.
the possibilities: raphael.js - custom attributes
the explanation: Where does Raphael.js store an element's data that is set with the element.data() method?
Combining Raphael and jQuery to achieve browser compatibility
can you help me to place a Highchart inside a SVG element instead of an HTML . Cascaded elements work fine. I have already done it with the jquery SVG plot. But Highchart throws an error 13. What can i do?
Kind regards
Markus Breitinger
You can generate chart in div, which will have negative margin. Then use getSVG() function and paste it ot svg element.
http://api.highcharts.com/highcharts#Chart.getSVG()
Unfortunately it is not suppored, highcharts renders the chart in additional divs and adds elements like labels/datalabels as html objects.
But you can copy the SVG of highstock in you SVG. But you will lose all attached events.
Like drag and drop, click ....
Here an Example of it.
http://jsfiddle.net/L6SA4/10/
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create a hidden and not attached div container.
var div = $('<div>This is an hidden unatached container.</div>');
// Create the chart
div.highcharts('StockChart', {
chart: {
width: 480,
height: 400,
events: {
load: function () {
// If hidden div was generated, take the svg content and put it into svg.
var stockSvg = $('svg', this.container);
var svgObj = $('#mySvg').svg();
// Force position of highstock
stockSvg.attr('x', 20);
stockSvg.attr('y', 30);
// Replace ugly rect with highstock
$('#container', svgObj).replaceWith(stockSvg);
}
}
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
I want to position Dojo's Dijit Dialog relative to one of my html element. is it Possible?
If yes. How?
currently it always shows dialog in middle of viewport.
Can any one help me regarding the matter?
Thanks.
amar4kintu
Another way that I do this (not great because I override a private method but it gives me the flexibility I want):
var d = new Dialog({
title:"Your Dialog",
_position:function(){
if(this.refNode){
p = Geo.position(this.refNode);
Style.set(this.domNode,{left:p.x + "px", top:p.y + "px"});
}
},
showAround:function(node){
this.refNode = node;
this.show();
}
});
d.showAround(dojo.byId("someNode"));
This example uses "dojo/dom-style" as Style and "dojo/dom-geometry" as Geo.
I did that by adjusting default absolute position of dijit.dialog using dojo..
I used following code to readjust absolute position of dialog to what I want..
dijit.byId('dialog').show();
dojo.style('dialog','background-color','#AAAAAA');
var co = dojo.coords('period'); // element below which I want to display dialog
dojo.style('md1','top',(co.y + 25)+'px');
dojo.style('md1','left', co.x+'px');
Hopefully this will help someone..
Thanks.
amar4kintu
I think dijit.TooltipDialog is what you need.
var dialog = new dijit.Dialog({
title: myTitle,
content: myDialogContent,
style: "width: 300px;",
onShow: function() { dojo.style(this.containerNode.parentNode,'visibility','hidden'); },
onLoad: function() { dojo.style(this.containerNode.parentNode,{top:'100px', visibility:'visible'}); }
});
Instead top:'100px' you can use also top:'20%' but not tested well. My dojo is 1.7.1.