perché non è l'evento di modifica casella di controllo attivato quando lo faccio programmazione in d3js

Così ho una funzione che modifica la casella di controlloperché non è l'evento di modifica casella di controllo attivato quando lo faccio programmazione in d3js

somefunction() { 
    d3.select("input").property("checked", true); 
}

e in un'altra funzione ho che rileva un cambiamento nella casella di controllo come questo :

d3.selectAll("input").on("change", change);

il problema che ho è quando cambia la casella di controllo senza di me cliccando su di esso, non viene rilevata come un "vero" cambiamento. Cosa posso fare per fargli rilevare qualcos'altro cambiandolo come una modifica "corretta"?

fonte

2015-09-16 KNN. T

d3 utilizza lo standard addEventListener nel suo metodo on. Il problema che si verifica è che la modifica di ha selezionato proprietà doesn't raise any events per il addEventListener da ascoltare. Il modo corretto sarebbe quello di chiamare solo il gestore stesso, dopo l'impostazione del proptery:

var myInput = d3.select("input"); 
myInput.property("checked", true); 
myInput.on("change")(); // call it yourself

codice completo di lavoro:

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <input type="checkbox" /> 
 
    <script> 
 
     
 
     var checked = false; 
 
     setInterval(function(){ 
 
     checked = !checked; 
 
     var myInput = d3.select("input"); 
 
     myInput.property("checked", checked); 
 
     myInput.on("change")(); 
 
     }, 2000); 
 
     
 
     
 
     d3.select("input").on("change", function(d){ 
 
     console.log('checkbox changed'); 
 
     }); 
 

 
    </script> 
 
    </body> 
 

 
</html>

fonte

2015-09-16 16:00:18 Mark

per qualche motivo, per il mio codice particolare, non piaceva quando ho impostato la proprietà di controllare e invece preferito vero. Ma funziona, quindi grazie! K –

@ KNN.T, non lo sto impostando sulla stringa "checked" ma su una variabile booleana denominata checked. Scusa se l'ho ritagliato dal mio esempio di codice più grande. – Mark

ah ok dolce, bene grazie comunque. Funziona benissimo: D –

La soluzione suggerita da Mark funziona perfettamente ma solo in alternativa, Vorrei anche ricordare che, anziché chiamare personalmente il gestore dell'evento, è possibile attivare personalmente l'evento e lasciare il resto del codice così com'è. L'evento onchange viene attivato sulla sequenza seguente valore-focus Cambia-unfocus. Ora ciò non accade quando lo si cambia senza fare clic su di esso, il valore cambia ma non è attivo. Ad ogni modo, invece di affidarti a questo, puoi semplicemente attivare l'evento onchange da solo. Ho creato un violino qui che lo spiega. Speranza che aiuta: https://jsfiddle.net/xcjje9r3/6/

window.clickMe = function() { 
 
    tmp = d3.select('#cbox'); 
 
    if (tmp.property('checked') == false) tmp.property('checked', true); 
 
    else tmp.property('checked', false); 
 
    tmp[0][0].dispatchEvent(evt); //MANUALLY TRIGGER EVENT 
 
} 
 
//tmp[0][0] is becoz d3.select returns an array and [0][0] position stores the actual DOM element in this array. 
 

 
window.listenerInitialize = function() { 
 
    evt = document.createEvent("HTMLEvents"); //CREATE NEW EVENT WITH TYPE 
 
    evt.initEvent("change", false, true); //THE EXACT EVENT TO FIRE 
 
    d3.select('#cbox').on('change', alerting); //ADDING LISTENER FOR EVENT 
 
} 
 

 
window.alerting = function() { 
 
    alert('testEvent'); 
 
}

fonte

2015-09-16 16:39:13 hunters30

perché non è l'evento di modifica casella di controllo attivato quando lo faccio programmazione in d3js

risposta

Problemi correlati