javascript - open - ¿Cómo invocar el evento "click" programáticamente en d3?
modals js (11)
Lo intento así (también en https://gist.github.com/1703994 ):
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js?1.27.2"></script>
<script type="text/javascript" src="js-libs/jquery-1.7.js"></script>
<style>
<!--
#test {
width: 400px;
height: 500px;
}
-->
</style>
</head>
<body>
<script type="text/javascript">
$(function() {
var w = 600,
h = 350;
var vis = d3.select("#test").append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
var g = vis.selectAll("g")
.data([ { x:1 , y: 2} ])
.enter().append("svg:g");
g.append("svg:path")
.attr("fill", "red")
.attr("stroke", "red")
.attr("stroke-width", "10")
.attr("d", "M 100 350 l 150 -300")
g.select("path")
.on("click", function() { console.log("Hello"); });
// XXX: how to execute click programmaticaly?
})
</script>
<div id="test"></div>
</body>
</html>
Pero no funciona
Creo que podemos usar https://github.com/mbostock/d3/wiki/Internals#wiki-dispatch_on
¿Pero como hacerlo?
Así es como lo hago.
g.selectAll("path").on("click", function(d, i){
my_function(d, i);
});
He encontrado que las devoluciones funcionan con funciones anónimas. Por lo tanto, para el código anterior, cualquier ruta en la que se haga clic llamará a my_function y pasará el dato d actual y el índice i de la ruta en la que se hizo clic.
Con D3 v4 es probable que desee esto:
d3.select(''#some-id'').dispatch(''click'');
Ref .: https://github.com/d3/d3-selection#selection_dispatch
Encuentro la siguiente solución:
d3.selectAll("path").each(function(d, i) {
onClickFunc.apply(this, [d, i]);
});
Donde d es información y i indexo esta información
Esta respuesta podría no estar relacionada, pero es útil para alguien que busque cómo invocar un evento de clic de un elemento SVG, ya que jQuery $ (mySvgElement) .trigger ("clic") no funcionará.
Así es como activar / invocar / generar un evento click para un elemento SVG mediante programación:
var ev = document.createEvent("SVGEvents");
ev.initEvent("click",true,true);
var target = $("svg>g>path[fill=''#0011cc'']").get(0); // get the SVG element here
target.dispatchEvent(ev); // like $(target).trigger(''click'') - but working!
Esto funciona. Estoy usando gráficos circulares, por lo que selecciono todos los sectores circulares "seleccionados" y, para cada uno de ellos, recupero la devolución de llamada "clic" adjunta (que he adjuntado en otra parte del código no incluida aquí, usando d3''s. método on ()) y luego invocar con los parámetros esperados en el contexto correcto.
d3.selectAll("g.selected").each(function(d, i) {
var onClickFunc = d3.select(this).on("click");
onClickFunc.apply(this, [d, i]);
});
La respuesta de @handler no funcionó por completo. Haría clic en el elemento svg pero no se registrarían eventos simulados adicionales. Esto es lo que funcionó para mí:
function eventFire(el, etype){
if (el.fireEvent) {
el.fireEvent(''on'' + etype);
} else {
var evObj = document.createEvent(''Events'');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
Uso:
eventFire(document.getElementById(element_id), ''click'');
Pruebe g.select("path").trigger("click")
Puede pasar a ser súper manual al obtener el evento del mouse y pasarle los argumentos que de otra forma le proporcionaría d3. Esto le proporciona una forma bastante limpia de hacerlo mientras usa construcciones d3. Para un solo elemento, use lo siguiente:
var path = g.select(''path'');
path.on(''click'').call(path.node(), path.datum());
Para elementos múltiples, puede activar cada uno por turno:
g.selectAll(''path'').each(function(d, i) {
d3.select(this).on(''click'').apply(this, arguments);
});
Este último también se puede usar para un solo elemento si su selector es lo suficientemente específico, o si usa .select() lugar de .selectAll() para devolver solo el primer elemento.
Simplemente llame al método .on como un getter para el valor registrado (es decir, su función de controlador), luego llame al resultado de eso:
g.select("path").on("click")();
Se vuelve un poco más complicado si su controlador utiliza los datos enlazados y / o los campos de eventos, o si tiene múltiples oyentes de eventos vinculados (por ejemplo, "click.thing1" y "click.thing2"). En ese caso, probablemente lo mejor sea disparar un evento falso usando los métodos DOM estándar :
var e = document.createEvent(''UIEvents'');
e.initUIEvent(''click'', true, true, /* ... */);
g.select("path").node().dispatchEvent(e);
Vine este hilo buscando un evento d3 mousemove para pruebas de unidad angular.
@natevw respuesta
g.select("path").on("click")();
ayudó mucho en el evento mouseover. Pero, aplicar eso a mousemove estaba dando un error nulo e.source.
El trabajo alrededor fue establecer el evento d3 programmatically.
d3.event = document.createEvent(''MouseEvent'');
d3.event.initMouseEvent("mousemove");
d3.select(elm[0]).select("rect").on("mousemove")();
Espero que esto ayude.
no estoy seguro de por qué, pero parece haber una discrepancia con la forma en que jQuery y d3 manejan los eventos que causan un evento de clic inducido por jQuery $("#some-d3-element").click() para no enviarlo al elemento d3.
una solución alternativa:
jQuery.fn.d3Click = function () {
this.each(function (i, e) {
var evt = new MouseEvent("click");
e.dispatchEvent(evt);
});
};
y luego llámalo:
$("#some-d3-element").d3Click();