[javascript] डी 3 में प्रोग्रामेटिक रूप से "क्लिक" कार्यक्रम कैसे शुरू करें?


Answers

पंजीकृत मान (यानी आपके हैंडलर फ़ंक्शन) के लिए .on रूप में बस .on विधि को कॉल करें, फिर उसके परिणाम को कॉल करें:

g.select("path").on("click")();

यदि आपका हैंडलर बाध्य डेटा और / या ईवेंट फ़ील्ड का उपयोग करता है, या यदि आपके पास एकाधिक ईवेंट श्रोताओं को बाध्य किया गया है (उदाहरण के लिए "क्लिक.थिंग 1" और "क्लिक.thing2") तो यह थोड़ा और जटिल हो जाता है। उस स्थिति में, मानक मानक डीओएम विधियों का उपयोग करके आप शायद नकली घटना को फायर कर सकते हैं:

var e = document.createEvent('UIEvents');
e.initUIEvent('click', true, true, /* ... */);
g.select("path").node().dispatchEvent(e);
Question

मैं इस तरह कोशिश कर रहा हूं ( 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>

लेकिन काम नहीं करता है

मुझे लगता है कि हम https://github.com/mbostock/d3/wiki/Internals#wiki-dispatch_on उपयोग कर सकते हैं

लेकिन इसे कैसे करें?




@handler जवाब पूरी तरह से मेरे लिए काम नहीं किया। यह svg तत्व पर क्लिक करेगा लेकिन अतिरिक्त अनुरूपित घटनाएं पंजीकृत नहीं होंगी। इसी से मेरा काम बना है:

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);
  }
}

उपयोग:

eventFire(document.getElementById(element_id), 'click');






यह उत्तर कुछ हद तक असंबंधित हो सकता है - लेकिन उम्मीद है कि किसी व्यक्ति को एसवीजी तत्व की एक क्लिक घटना को कैसे शुरू किया जाए - क्योंकि jQuery $ (mySvgElement) .trigger ("क्लिक") काम नहीं करेगा।

इस प्रकार आप एसवीजी तत्व के लिए एक प्रोग्राम ईवेंट को प्रोग्रामेटिक रूप से ट्रिगर / आक्रमण / बढ़ा सकते हैं:

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!



मुझे अगला कामकाज मिल रहा है:

d3.selectAll("path").each(function(d, i) {
                    onClickFunc.apply(this, [d, i]);
                });

जहां d डेटा है और i इस डेटा को इंडेक्स करता i




Related