I get this error in cytoscape.js:
"Do not assign mappings to elements without corresponding data (e.g. ele p for property background-image with data field linkImagem); try a [linkImagem] selector to limit scope to elements with linkImagem defined"
Look data array:
{ data: { id: 'atr1', classificacao : '1', backgroundColor : '#F79646', nomeAtributo : 'Bancos desconfortáveis', angulo : '0', valign : 'top', halign : 'right', linkImagem : 'http://www.fec.unicamp.br/~confterm/imagens/background/nodes/8.png' }, position: { x:220, y: 300 }, selected: false, selectable: false, locked: false, grabbable: false }
Look script style options:
.selector('node')
.css({
'label': 'data(nomeAtributo)',
'text-valign': 'data(valign)',
'text-halign': 'data(halign)',
'color' : '#000',
'font-size': '11px',
'background-fit': 'fit',
'background-color': 'data(backgroundColor)',
'background-image': 'data(linkImagem)',
})
How I can solve this?
The solution is given to you in the error message. Either don't use mappers if you're not going to define the data for each matching element, or adjust your selectors so that they only match elements with the data defined.
Related
I have a use case whereby sequential numbers need to be displayed in a table of data in the UI of an app, beginning at 1. The app is built using Vue and Buefy for the UI component library. Here is a screenshot of some sample data in such a table:
This needs to have a third column added and should display 1 in the first row and 2 in the second row.
I looked in the Buefy docs to see if their table component has built-in capability to do this but didn't see anything that fit. If that is the case, the data passed to the table component will need to provide it.
Since the format of the data passed to the table component is an array of objects I was thinking there might be a way to use each object's index, incremented by 1, for this purpose. But I'm not sure how to get this:
const data = [
{ color: 'blue', size: 'large', height: 'tall' },
{ color: 'green', size: 'medium', height: 'short' },
{ color: 'purple', size: 'small', height: 'average' }
];
to be this:
const data = [
{ id: '1', color: 'blue', size: 'large', height: 'tall' },
{ id: '2', color: 'green', size: 'medium', height: 'short' },
{ id: '3', color: 'purple', size: 'small', height: 'average' }
];
I tried the following but it does not give the desired outcome:
console.log([...data, ...Object.keys(data)];
How can the desired end result be achieved? I'm looking for a simple approach, if possible.
Also, I was concerned about what happens if an element gets removed from the original array of objects...would that mess up the sequential numbering that's based on the index number? I tested that situation by executing data.splice(0,1); but examining the results in the console, the objects appear to get re-indexed and therefore it shouldn't be an issue. Unless someone knows otherwise.
If I understood you correctly try with index:
new Vue({
el: '#demo',
data() {
return {
items: [
{ color: 'blue', size: 'large', height: 'tall' },
{ color: 'green', size: 'medium', height: 'short' },
{ color: 'purple', size: 'small', height: 'average' }
]
}
},
methods: {
del(i) {
this.items.splice(i, 1)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div v-for="(item, i) in items" :key="i">
<div>{{ i+1 }} - {{ item.color }}</div>
<button #click="del(i)">delete</button>
</div>
</div>
The treemap below has two levels. I want to display a legend for the top level nodes (Node A and Node B). With other types of charts I've used, the legend can be auto-generated or I can define it explicitly. With the treemap, it appears one is not auto-generated, and if I define one explicitly, it is never displayed. Is it possible to display a legend for a treemap?
<style>
#chart {
position: absolute;
border: 1px solid;
top: 100px;
left: 100px;
right: 100px;
bottom: 100px;
border: 1px solid black;
}
</style>
<div id="chart"></div>
<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
<script>
var options = {
series: [{
type: 'treemap',
data: [{
name: 'Node A',
value: 20,
children: [{
name: 'Node A1',
value: 12
}, {
name: 'Node A2',
value: 8
}]
}, {
name: 'Node B',
value: 20,
children: [{
name: 'Node B1',
value: 20
}]
}]
}]
};
var chart = echarts.init(document.getElementById("chart"));
chart.setOption(options);
</script>
The legend object of ECharts is constructed from the series object by default. This means that nested datas in treemap series aren't part of the legend. You need to make two entries in your series: one for Node A, one for Node B.
So you can first use the code below, and you'd see that you run into an UI-related issue.
{
legend: {
data: ['Node A', 'Node B'],
top: 55,
itemGap: 5,
backgroundColor: 'rgb(243,243,243)',
borderRadius: 5
},
series: [
{
type: 'treemap',
name: 'Node A',
data: [{
name: 'Node A1',
value: 12,
}, {
name: 'Node A2',
value: 8,
}]
}, {
type: 'treemap',
name: 'Node B',
data: [{
name: 'Node B1',
value: 20,
}]
}
]
}
This code will run, but the legend <-> chart sync will not work properly since ECharts doesn't support multiselect mode legend for the treemap object (it's a bit technical). Basically, you can only use single-selection mode as of the current ECharts version.
To get rid of the weird UI issue, you will either have to remove the legends (since the name already describes each block in the map so you might not need any legend), or add the following line inside the legend object:
selectedMode: 'single'
This will allow you to have a properly working legend, but this will not allow you to display two series at the same time. At least, you will be able to switch between your entries in your series array.
Here is a demo screenshot on the official editor:
Echarts demo
How do I add directions to my edges?
How do I label my vertices?
Right now I have:
var cy = cytoscape({
container: document.getElementById('cy'),
elements: graph_to_elements(graph),
style: 'node { background-color: blue; }'
});
graph is vertices and edges.
graph_to_elements is a function that graphs the inputted graph.
What other things can I add to style? When I tried adding different properties it would not work.
When you want to add directions to your edges, simply add the 'target-arrow-color' and 'target-arrow-shape' property to your style.
You can see this in a very easy example here: http://js.cytoscape.org/#getting-started/specifying-basic-options
{
selector: 'node',
style: {
'background-color': '#666',
'label': 'data(id)' // here you can label the nodes
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle' // there are far more options for this property here: http://js.cytoscape.org/#style/edge-arrow
}
Stick to the notation provided by cytoscape when initializing the graph, when you have more than one style to define, you want to write:
style: [
{
selector: '...'
style: {...}
},
{
...
}
]
I have panel with border layout:
var panel = new Ext.Panel({
width:'100%',
height:'100%',
layout:'border',
renderTo:'wrapper',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:15px'
},
items: [{
title: 'Header',
region: 'north',
height: 150,
minSize: 75,
maxSize: 250,
cmargins: '5 0 0 0',
html: Ext.get("header-div").getHTML()
}
......
and I have a tree
var tree = Ext.create('Ext.tree.Panel', {
xtype: 'tree-xml',
id:'treegrid',
title: treeTitle,
width: '80%',
height: '80%',
renderTo: Ext.get("tree"),
....
My question is:how can I refernce tree in my panel, which means I want to append the tree into
'north' region of panel.
Thanks.
How to reference components in Extjs:
var treeReference = Ext.ComponentQuery.query ('tree-xml [title=treeTitle])[0]; // basically you are saying get me the first component you find that is a tree-xml and that its title is treeTitle
Check out the docs in sencha.
Be careful to refer to element 0 of the array (query method returns an array even if there is only 1 element matching).
Use methods add and remove from panels and containers to achieve desired functionality.
Best regards.
Please let me know, how to add checkbox column in a grid.
I tried the following. But its read only checkbox.
Should I use checkboxModel? if so, then please let me have the complete code
Here you go, an Ext4 example matching any data element:
{
xtype: 'checkcolumn',
header: 'My Checkbox column',
dataIndex: 'myBooleanFieldThatMatchesTheModelFieldOfMyGridStore',
listeners: {// In case you want to perform a specific action on click...
checkChange: me.onCheckChange
},
flex: 1
}
Here is an example of a grid with a checkbox.
var sm = Ext.create('Ext.selection.CheckboxModel');
var grid2 = Ext.create('Ext.grid.Panel', {
store: //
selModel: sm,
columns: //[]
columnLines: true,
width: 600,
height: 300,
frame: true,
title: 'Framed with Checkbox Selection',
renderTo: Ext.getBody()
});