I'm trying to listen to mousemove or drag events when dragging a sortable item. I need to know the mouse position while dragging. Here is an example.
JSfiddle
document.addEventListener('drag', (e) => {
console.log(e);
});
Any help would be appreciated!
Related
Is there a way to track mouse double click event in dc.js like mouseover, mouseup, click, mouseout etc..
volumeChart.on('postRender', function() {
chart.select('text.pie-slice').on("dbclick", function() {
console.log('dbclick')
caught('dbclick');;
});
});
Let me know the feasibility in dc js using postrender.
Thanks,
Yash
I have this code for add an event when you click in an element of the chart
chart.multibar.dispatch.on('elementClick', function(e) {
console.log(e);
});
I need to change the fill color of the clicked element
I want to remove stream style (state ? ("Stream", "Stacked" and "Expanded")) on stacked area chart and use this code :
d3.selectAll("g.nv-series")
.filter(function() {
return d3.select(this).select("text").text() == "Stream";
})
.remove();
But it works only the first time.
I tryed to handle events on chart because i want to refresh rendering of chart but it didn't work for the styles click. It works only for the legend click.
chart.legend.dispatch.on('legendClick', function(e){
console.log('legend was clicked', 'no namespace.');
});
How i can i handle click on style event ?
setter
chart.style('stream');
getter
chart.dispatch.on('stateChange', function(e) {
console.log(e); //e.style holds the current style
});
List of available styles can be found here https://github.com/novus/nvd3/blob/master/src/models/stackedArea.js#L299-L318
I also had hard time with this issue so I hope this would help you.
Cheers!
I'm using d3 behavior api to implement some drag and drop functionality on my chart. There're some circles on the chart, what I want to do is make the circles able to move around when user is dragging them.
But I don't know how to get the reference of the circle which is being dragged by user.
In below code, where and how to get the reference of the selection and the current mouse position?
var drag = d3.behavior.drag()
.on("dragstart", function(){
//do some drag start stuff...
console.log('drag start');
})
.on("drag", function(){
//hey we're dragging, let's update some stuff
})
.on("dragend", function(){
//we're done, end some stuff
console.log('drag end');
});
Somebody please help!
You get the current selection from
d3.selection(this)
If you want to get the current mouse position, use this code
d3.mouse(this)
That returns an array, where [0] returns the x position of the mouse, and [1] returns the y position.
Does anyone know of a hack to allow for a left->right swipe on a tableviewrow. The default swipe action opens a delete button however I require additional buttons but want to maintain the same UX but the "swipe" event listener doesn't seem to fire on rows.
myTblRow.addEventListener('swipe', function(e){
Titanium.API.info("huzzah, a row was swiped");
});
The above == no dice.
It does require a bit of a hack.. remove the editable property on the tableView declaration.
The hack is to apply a view that covers the tableRow:
var row1 = Titanium.UI.createView({
width: Titanium.Platform.displayCaps.platformWidth,
height: 145,
zIndex: 100,
opacity: 0.1
});
row.add(row1);
Notice the zIndex, the opacity makes it exist but be totally transparent.
You now need to create a 'swipe' event listener:
tableView.addEventListener('swipe', function(e){
tableView.updateRow(e.index, createUpdateRow(e.source.myProperty), {
animationStyle: Titanium.UI.iPhone.RowAnimationStyle.LEFT
});
});
When the event fires, createUpdateRow() is called, which returns a tableRow. This tableRow you add all of your custom buttons to, you can change the height of the row, anything. The animation style property will mean if you swipe from the right > left, the new row will animate in from the left, which is an effect I like..
Hope this helps, anyone else.. The extra View (row1) is what got me for ages!