I am probably having some kind of brain damage atm because something like this should be trivial.
I got a bunch of SVG circles rendered manually (via React). I am then attaching d3 drag behavior to all of them. The drag behavior is applied, and the drag function is being executed, but when I drag one of these circles I am not able to respond accordingly because I do not know which one of them was moved. Where can I get the ID of dragged element?
I have checked a few other questions and found just some crazy filter solution... that cannot be it.
I have also peeked at docs and found the subject property.. however that one is null everywhere I tried it.
My code:
componentWillUpdate() {
let nodes = d3.selectAll("circle");
const dragFn = (d,i) => {
d3.event.sourceEvent.stopPropagation();
this.props.onNodeDrag(I_NEED_AN_ID_HERE);
}
const dragBehavior = d3.behavior.drag();
dragBehavior.on('drag', dragFn);
dragBehavior.on('dragstart', () => {
d3.event.sourceEvent.stopPropagation();
});
nodes.call(dragBehavior);
}
I don't know what your "this" is inside the function but in plain js you can get any attribute of the html element with:
d3.select(this).attr("id"); //or class etc.
or if it's wrapped
d3.select(this).select("circle").attr("id");
Here's an example: http://jsfiddle.net/a2QpA/343/
Related
I am trying to reset after choosing some of the individual's bar.
index.html: (line no. 62)
<span>
reset
</span>
This seems not to work. I was able to reset all the graphs pie chart, line chart, etc but not this one.
Those two ordinal graphs are created in index.js like this:
var focus = new dc.barChart('#focus');
var range = new dc.barChart('#range');
https://blockbuilder.org/ninjakx/483fd69328694c6b6125bb43b9f7f8a7
Update:
It looks weird now Coz it's showing a single bar and all the bar have got invisible but I want them to be visible (in gray colour) but not clickable.
This example replaces the built-in filtering functionality of the bar chart with its own implementation of ordinal selection, because the chart has a linear scale.
The example uses a global variable focusFilter to store the current selection. We need to empty this out and we also need to update the dimension filter as the original filterAll would do, pulling that code out of the click handler:
focus.applyFilter = function() { // non-standard method
if(focusFilter.length)
this.dimension().filterFunction(function(k) {
return focusFilter.includes(k);
});
else this.dimension().filter(null);
};
focus.filterAll = function() {
focusFilter = [];
this.applyFilter();
};
This will also allow dc.filterAll() to work, for a "reset all" link.
Fork of your block.
For some reason, I could not get the original
reset
links to work at all in this block, so I replaced them with the equivalent D3 click handlers:
d3.select('#reset-focus').on('click', () => {
focus.filterAll();
dc.redrawAll();
})
d3.select('#reset-all').on('click', () => {
dc.filterAll();
dc.redrawAll();
})
I also updated the focus ordinal bar example. Note that automatic hiding/showing of the reset link doesn't work because the chart still has an irrelevant range filter inside of it.
I'm using smart-table at the moment, and I have input text boxes up the top of each column and I am using st-search. The point of what I am making is something is selected from the table, and then the results in the table are changed.
I am trying to clear the search boxes when the row is clicked. At the moment other business logic is implemented on click, so it's at this point that I am looking to clear these text boxes.
I have tried to associate an ng-model to these text boxes, and to clear them when the row is clicked but the text boxes don't change. I have also googled this issue and I have only found solutions on how to make this work for when you click on a button (by a directive) to clear the predicates. I haven't been able to make these solutions work programatically however.
To resolve this I did the following:
Monkey-patched smarttable.js with the code in this github issue (https://github.com/lorenzofox3/Smart-Table/issues/164). For me this occured at around line 574.
// added from https://github.com/lorenzofox3/Smart-Table/issues/164
ng.module("smart-table").directive("stResetSearch",
function() {
return {
restrict: 'EA',
require: '^stTable',
link: function(scope, element, attrs, ctrl) {
return element.bind('click',
function() {
return scope.$apply(function() {
var tableState;
tableState = ctrl.tableState();
tableState.search.predicateObject = {};
tableState.pagination.start = 0;
return ctrl.pipe();
});
});
}
};
});
Added 'st-research-search' to the element that was calling the function in angularjs. For me, that was the "tr" element. Like below.
<tr ng-repeat="medicine in medicines" ng-click="medicationMatched(medicine)" ng-class="heatmapClass(medicine)" st-reset-search>
This worked fine. Unfortunately, I wasn't able to programatically clear the predicates from the code. But this works well enough for me.
I'm using d3 v4 and trying to apply a style to an element on mouseover.
I'm wondering if it's an API change with V4 but I can't seem to get at the node
I have code:
.on('mouseover', () => {
let self = d3.select(this);
let c = self.attr('class');
but this gives an error
Cannot read property 'getAttribute' of null
So the d3.select() doesn't seem to work...
The mouseover IS firing however.
I can use
.on('mouseover', (elem) => {
console.log('elem', elem);
Which will give me some type of D3 object, but not a DOM node.
I can't use any D3 methods on this object
elem.classed("hilite", true);
elem.attr("class", "hilite");
Neither of those methods exist on a d3 returned object.
So how do I do this super basic operation in d3?
related to
Change class of one element when hover over another element d3
You can use arrow functions (if this an arrow function), if you don't need access to this of the current element. In this case you do need, because D3 calls event handlers setting this to the element triggering this event.
See: Using arrow functions with d3
I am using the Alloy Diagram Builder to create and display network topology.
I would like to remove default click and drag events attached to each nodes, so viewers would not have the ability "build" diagrams but only view diagrams that I have generated.
http://alloyui.com/examples/diagram-builder/real-world/
I have tried these but it does not work.
// detach click event to all nodes with class aui-diagram-node.
Y.all('.aui-diagram-node').detach("click");
// unbind
$(".aui-diagram-node").each(function(){
$(this).unbind();
});
I believe the event is attached to the container .aui-diagram-builder-drop-container via delegate() and the event would be mousedown.
Merely by accident I found a hack that might work for this. I was adding tooltips to my page on which I had a diagram builder, well apparently the tooltips layer a div over the page and simply set the opacity on it to be clear and the object still resides. After a tooltip had come up i was unable to interact with the piece of the diagram builder the tooltip had popped up over.
So based of this concept, why not try overlaying a div over the entire canvas of the diagram and give it a high z-index so that it sits on top. It should effectively not allow interaction with the canvas.
Yes it's a kludge but it just may work.
To make a DiagramBuilder read-only, you can detach() events from all of its children recursively:
/*
* Readonly the diagram
*/
function ReadonlyDiagram(diagram) {
function detachRecursively(node) {
node.get('children').each(detachRecursively);
// You may also want to set the cursor to the default since it will
// change based on which elements the mouse is over.
// node.setStyle('cursor', 'auto');
// You may want to detach specific events such as 'click' or
// 'mousedown' if you do not want to disable all events.
node.detach();
};
diagram.on('render', function (event) {
detachRecursively(diagram.get('boundingBox'));
});
}
Now, you must be post diagramBuilder object to ReadonlyDiagram function like below codes:
YUI().use('aui-diagram-builder', function (y) {
var diagram = new y.DiagramBuilder(
{
availableFields: data,
boundingBox: '#' + containerId,
fields: nodes,
srcNode: '#' + builderId
}).render();
diagram.connectAll(connections);
if (callBackDiagram !== undefined) callBackDiagram(diagram);
if(isReadonly === true) ReadonlyDiagram(diagram);
});
});
Reference
I want to dynamically add some preconfigured HTML-Elements in use of a 'click'-event with mootools.
So I can make it work with my basic knowledge, although it isn´t very nifty. I coded this so far...
This is my preconfigured element, with some text, a classname and some event, cause i wanna have events already added, when it´s inserted into my container:
var label = new Element('label', {
'text': 'Label',
'class': 'label',
'events': {
'click': function(el){
alert('click');
}
}
});
Here is my function, which adds the label-Element:
function addText(){
$('fb-buildit').addEvent('click', function(){
row.adopt(label, textinput, deletebtn);
$('the-form').adopt(row.clone());
row.empty();
/*
label.clone().inject($('the-form'));
textinput.inject($('the-form'));
deletebtn.inject($('the-form'));
*/
});
}
The second part which uses inject also works, but there, my click-Event, which fires the "alert('click')" works too. The method with adopt doesn´t add any event to my label Object, when its inserted in the dom.
Can anyone help me with this. I just wanna know why adobt ignores my "events" settings and inject doesn´t.
Thanks in advance.
(sorry for my english ^^)
you go label.clone().inject but row.adopt(label) and not row.adopt(label.clone()) -
either way. .clone() does not cloneEvents for you - you need to do that manually.
var myclone = label.clone();
myclone.cloneEvents(label);
row.adopt(label);
this is how it will work
as for why that is, events are stored in the Element storage - which is unique per element. mootools assigns a uid to each element, eg, label = 1, label.clone() -> 2, label.clone() -> 3 etc.
this goes to Storage[1] = { events: ... } and so forth. cloning an element makes for a new element.uid so events don't work unless you implicitly use .cloneEvents()
you are sometimes not doing .clone() which works because it takes the ORIGINAL element along with its storage and events.
suggestion consider looking into event delegation. you could do
formElement.addEvent("click:relay(label.myLabel)", function(e, el) {
alert("hi from "+ el.uid);
});
this means no matter how many new elements you add, as long as they are of type label and class myLabel and children of formElement, the click will always work as the event bubbles to the parent.