Axes-Reordering event on parallel coordinates - javascript

i m still working on a parallel coordinates plot using https://github.com/syntagmatic/parallel-coordinates#parallel-coordinates and d3.js
i need to update something after the axes are reordered.
So try to add an listener to the parcoords, but i don't find how the event is called which is fired when the axes are reordered.
I use the .reorderable() method to enable the reordering.
I tried
parcoords.on("dimensions",function (){
alert('reorder');
});
but "dimensions" is not the right event, it is only triggered after changing the axes using the .dimensions() method.
I went through the examples of the library, but only found on brush events, and went through the api description, but didn't found the right event.
the question is: what is the reorder event called?
thanks in advance
greetings Jones

the event is called "axesreorder".
it and other events can be found here: https://github.com/syntagmatic/parallel-coordinates/blob/master/src/events.js (first line)

Related

setExtremes event handler being called an increasing number of times each trigger?

I'm trying to add an event handler to setExtremes for the X Axis. However, this event handler gets called more than once for each zoom action, and whenever the chart is redrawn, the number of times this event will get triggered increases.
When I have something similar to the following:
xAxis: {
...options.xAxis,
events: {
setExtremes: event => console.log('setExtremes'),
afterSetExtremes: event => console.log('afterSetExtremes'),
},
},
My console gets flooded with both calls. If I trigger enough chart updates, the console looks like this (notice each console.log is being run 23 times).
I've looked through the Highcharts documentation, as well as their forum and other Stack Overflow questions trying to find something relating to my problem, but nothing seems relevant to this issue.
What should I do to fix an issue like this?
EDIT:
We are using the map extension to highcharts-react-official
require('highcharts/modules/map')(Highcharts);
This seems to only happen on the mousewheel zoom handler as an on click handler only fires once regardless of how many times the graph has refreshed

Event viewreset is not fired in leaflet version 1.0.2

I am using d3 with Leaflet (v 1.0.2) and need to catch the viewreset event, but it's not fired.
this.map.on("viewreset", () => console.log("VIEW RESET"));
Is anyone else having this problem? I'm able to catch the zoomend event for example.
Also, manipulating positions and etc. on svg-layers is a bit of a pain as well in the new versions of Leaflet...but that is another story.
JSFidlle showing the problem http://leafletjs.com/reference-1.0.2.html
According to: https://github.com/Leaflet/Leaflet/issues/4837
in 1.0, layers will have to rely on both zoom (zoom change) and viewreset (full reset of a layer). This was necessary to implement flyTo and other arbitrary animations.
And in: https://github.com/Leaflet/Leaflet/pull/3278
remove viewreset event and depend solely on zoom event in layers instead
So viewreset event is no longer triggered on zoom.

JQuery Plot, exists an OnCompleteDraw Event?

i want to know if is possible get an event before the JQueryPlot draw a graph and after that. If somebody have an example better.
Thank you in advance
You can use hooks plugin in order to bind some events.
You can find the jqPlot documentation here and a working example on jsFiddle here (once you have clicked the url, close the two alert prompts and click on the "Run" button in order to see correctly how it works :
$.jqplot.config.enablePlugins = true;
$.jqplot.preDrawHooks.push(function(){
alert('predraw');
});
$.jqplot.postDrawHooks.push(function(){
alert('postDraw');
});

Flot: zooming on dynamic graph

I'm having an issue where when I try to zoom in on a certain area of my graph that is continuously updating the plotselected event fires off numerous times instead of just once. I've slowed down the update rate in the attached jsfiddle significantly so that you aren't overwhelmed with alert messages to show the multiple plotselected events fired off. With a quicker refresh rate you could be stuck with 50+ of those messages. Anyways, is there a way to only fire off that event handler for the last event in the chain that's created after selecting the area? Suspect code in question (this works fine in static mode):
$("#overview").on("plotselected", function (event, ranges) {
alert(ranges.xaxis.from+','+ranges.xaxis.to);
plot.setSelection({
xaxis: {from:ranges.xaxis.from,to:ranges.xaxis.to}
});
});
full jsfiddle example: http://jsfiddle.net/grkblood13/6TG5a/
You are attaching the plotselected event handler to your plot div every time you call plotData. These are cumulative!
So, simply remove the $("#overview").on("plotselected" call outside that function.
Updated fiddle.

Raphaeljs: How to get the elements reference back using event.target?

Currently I have an small application for drawing shapes.
Here is an example including my problem: http://jsfiddle.net/auyaC/
I get the error: Uncaught TypeError: Object [object Object] has no method 'getBBox'
Below stripped code where the error comes from
When the user clicks on a shape, I catch the event.target
var onMouseDown = function(event) {
setBBoxes($(event.target)); // Seems OK
};
I want the BBoxes back again but my shape has lost the BBox..
var setBBoxes = function(shape) {
shape.getBBox(); // Unable.. getBBox is part of Raphael shapes, but mine is not the real reference?
};
And a stripped example: http://jsfiddle.net/auyaC/2/
Edit
Ok so my problem was mixing up jQuery and Raphaeljs, because I am unable to use the mouse events of Raphael.
It seem that none of the examples online using mouse events or touch events work.
I have read these issue reports
https://github.com/DmitryBaranovskiy/raphael/issues/720
https://github.com/DmitryBaranovskiy/raphael/pull/737
Also Windows thinks I have touch input available for 255 touch points.
But I don't have a touchscreen anymore (had one but changed screen and deleted drivers).
So for me, even http://jsfiddle.net/5BPXD doesn't work on my computer...
You generally do not want to mix jQuery and Raphael like this, as it's easy to get confused about which library's event handlers and methods you're using. You also lose Raphael's fallback capabilities for old browsers when you start directly messing with the DOM elements that Raphael creates.
In this case, I recommend adding the .mousedown() listener directly to the Raphael element.
var paper = new Raphael($(".testarea")[0], $(".testarea").width(), $(".testarea").height());
var circAttr = {
"fill": "#4ba6e8",
"stroke": "#1a81cc",
"stroke-width": "2"
};
paper.circle(200, 200, 80).attr(circAttr).mousedown(function() {
someFunction(this);
});
var someFunction = function(shape) {
console.log(shape.getBBox());
};
Updated fiddle: http://jsfiddle.net/auyaC/3/
Of course, you lose the ability to select all the shapes at once with a selector and add the event to all of them at once. You'll need to add the mousedown event to each one as it's created. Small tradeoff, I think.
I've finally found the fix for my bug...
It seem that Raphael thought that I had a touch screen.
The "Tablet PC Components" Windows feature was turned on. After disabling this feature, I was able to use the mouse and touch events again!

Categories

Resources