How we can get all features properties in D3 with clicking on a feature?
For example, how we can get 'AREA' and 'PERIMETER' of all provinces of this map: GeoJson map of Colombia, when clicking on a province?
The code below not work. I see 'properties' undefined.
function clicked(d) {
var polys= effectLayer.selectAll("path");
var x;
var txt;
for (x in polys) {
//show this:
txt += polys[x].properties.AREA + " ";
}
alert(txt );
}
You're mistaking a selection for a datum. You cannot access a selection like this:
polys[x].properties.AREA
So, since what you want is the datum, use an each:
var txt = "";
var polys= mapLayer.selectAll("path").each(function(e){
txt += e.properties.AREA + " "
});
Here is the updated bl.ocks, check the console: https://bl.ocks.org/GerardoFurtado/bb29d8d5b984da7fc8079c94cce9423c/e9963b96e01b2ecab5215ecf31c7d821c6b54daf
Related
I'm trying to do a tooltip similar to this:
https://codepen.io/team/amcharts/pen/dyyaxLr
But when a series is disabled via the legend (i.e. "cars"), I also want to remove the value in the tooltip.
I guess there should be a way to format the series.tooltipText with an adapter like this:
series.adapter.add("tooltipText", function (text, target) {
// generate text dynamically
// ...
return text;
});
But I can't figure out how to get only the data for the visible series and format the string accordingly.
Is something like this possible?
I found the following solution:
series.adapter.add("tooltipText", function (ev) {
var text = "[bold]{dateX}[/]\n";
x.series.each(function (item) {
if (!item.isHidden)
text +=
"[" +
item.stroke.hex +
"]●[/] " +
item.name +
": {" +
item.dataFields.valueY +
"}\n";
});
return text;
});
I'm trying to find if amcharts has a facility to have legends as checkboxes just like highcharts does. Some examples in here -
http://stackoverflow.com/questions/19174158/in-highchart-legend-want-to-bring-checkbox-at-start
http://jsfiddle.net/lukelarsen/yHGS9/9/
http://flexdevtips.blogspot.co.nz/2009/10/linechart-with-checkbox-legend.html
I tried to put checkboxes outside the chart & add listeners & so forth. it gets complicated. So wondering if anyone has had this requirement & has managed to implement it?
Any help would be highly helpful.
There you go:
First we have to add eventlisteners to create the boxes everytime the chart redraws. (this is necessary because the checkboxes are child elements of the legend and the legend is recreated everytime sth happens with the chart)
chart.addListener("init", function() {
chart.addListener("drawn", createCheckboxes);
chart.legend.addListener("showItem", createCheckboxes);
chart.legend.addListener("hideItem", createCheckboxes);
}
Then we're creating the one checkbox for each legend entry.
function createCheckboxes() {
var legend = chart.legend.legendData;
var div = $("<div style='position:absolute; top: 10px'></div>");
for(var i = 0; i < legend.length; i++) {
div.append("<input style='float: left; "
+ "position: absolute; top:" + legend[i].legendEntry.y + "px' "
+ "type='checkbox'" + (legend[i].hidden ? " " : " checked ")
+ "onclick=toggleItem(" + i + ")></input>");
}
div.appendTo($(chart.legend.div));
}
The last step is to handle the click event on the checkboxes.
var toggleItem = function(i) {
chart.legend.clickLabel(chart.legend.legendData[i], event);
}
That's it. Demo
I am using openlayers 3. From the values contained in a vector GeoJSON, I want to fill a dropdown menu. When selecting a value from the dropdown menu, I want to zoom in on the entity.
My problem now is that I want to generate my HTML from the attributes of my GeoJSON. So I tried this simple code but it doesn't work :
var menu = document.getElementById('menuDropDown');
vector2.getSource().forEachFeature(function() {
menu.innerHTML = feature.get('NOM').join(', ');
});
EDIT:
I'm able to populate a dropdown menu from a list:
var list = ['a','b','c'];
var mySelect = $('#mySelect');
$.each(list, function(val, text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
What i want to do it's to populate this list from the attribute of my vector
So i try this:
// vector2 it's a GeoJSON who is integrate on my map
vector2.getSource().getFeatures().forEachFeature(function(feature) {
list.push(feature.get('NOM'));
});
Firstly I'm assuming you have to pass some parameter to your callback:
vector2.getSource().forEachFeature(function(feature) {
Then you can append an item to a dropdown like so:
var item = document.createElement('option');
item.setAttribute('value', feature.get('NOM'));
var textNode = document.createTextNode(feature.get('NOM'));
item.appendChild(textNode)
menu.appendChild(item);
All together:
var menu = document.getElementById('menuDropDown');
vector2.getSource().forEachFeature(function(feature) {
var item = document.createElement('option');
item.setAttribute('value', feature.get('NOM'));
var textNode = document.createTextNode(feature.get('NOM'));
item.appendChild(textNode)
menu.appendChild(item);
});
I have resolve my problem:
vector2.getSource().on('change', function(evt){
var source = evt.target;
var list = [];
source.forEachFeature(function(feature) {
list.push(feature.get('NOM'));
});
// console.log("Ecrit moi les noms : " + list);
Thanks you to those who took the time to respond
i want to set an id to Raphael set because i want to display it after an event click.
this is my set:
var divResult = document.getElementById('printResult');
var space2Draw = Raphael(divResult, 1600, 900);
var st = space2Draw.set();
st.push(
space2Draw.circle(newXCoordinates, newYCoordinates, 20).click((function (valore) {
return function () {
window.open("index-point.html?id=" + (valore) + "&type=" + type + "&description=" + description + "&name=" + name);
}
}(valore))).mouseover(function () {
this.attr({ 'cursor': 'pointer' });
this.attr({ 'opacity': '.50' });
}).mouseout(function () {
this.attr({ 'opacity': '1' });
})
);
in my page i have a button:
function show(){
var element = space2Draw.getById(-1);
element.show();
}
}
Is not possible to set an id in this way : set.id = -1?
How can I set an id and then I find the set?
Thanks in advance for the help.
You can try using setAttribute() to add a CLASS for the elements you want to access later, and then modify their CSS propperties. The first step would be to change the CLASS of each element:
myElement.node.setAttribute("class", "class_name");
Unfortunately, Raphael does not allow you to handle sets as unique HTML objects, so you cannot do this for the entire set at once. Instead, you might have to do this for each element in your set, possibly with a for cycle, something like this:
for (var i=0; i<st.length; i++) {
st[i].node.setAttribute("class", "class_name");
}
Then, using JQuery, you can modify the CSS properties of the CLASS you created in order to display the elements in your set.
function show(){
$('.class_name').css('display', 'block');
}
I hope this helps.
Maybe you can use Raphael data() function to assign any data to your element/set.
Example:
// you can keep global var for your id and increment it within your code
var id = 0;
var p = Raphael(100, 100, 500, 500),
r = p.rect(150, 150, 80, 40, 5).attr({fill: 'red'}),
c = p.circle(200, 200, 70).attr({fill: 'blue'});
var set = p.set(r,c).data("id", id);
id++;
// then in your click event to get the id you can do
var whichSet = this.data("id");
// data("id") will return you the global id variable
Good Luck
function sidebar(editor)
{
var selection = editor.getSelection();
if(selection.getSelectedText()!="")
{
var range = selection.getRanges();
var customNode = editor.document.createElement( 'cdl:sidebar' );
var extractedContent = range[0].extractContents();
customNode.append(extractedContent);
var sidebarHolder = editor.document.createElement("sidebarHolder");
sidebarHolder.append(customNode);
var nodeHtml = sidebarHolder.getHtml();
editor.insertHtml(nodeHtml+" ");
}
else {
showErrorMessage("Selection is not proper");
}
}
This is my code.Whenever i select a single word like "Please" in "Please post comments or corrections" statement ,after adding tags Please.The space between "Please Post" get's trimmed.But when i select "Please "(word with space),the code works correctly.And , i want that tag should not visible in editor , it should be visible in source panel.
Try appending html to ckeditor instance rather adding text.