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




6 Answers

यकीन नहीं है कि क्यों, लेकिन jQuery और d3 संभाल घटनाओं के साथ एक विसंगति प्रतीत होती है जो एक jQuery प्रेरित क्लिक ईवेंट $("#some-d3-element").click() कारण बनता है। d3 तत्व को प्रेषित करने के लिए $("#some-d3-element").click()

एक कामकाज:

jQuery.fn.d3Click = function () {
  this.each(function (i, e) {
    var evt = new MouseEvent("click");
    e.dispatchEvent(evt);
  });
};

और फिर इसे कॉल करें:

$("#some-d3-element").d3Click();

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

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




यह काम। मैं पाई चार्ट का उपयोग कर रहा हूं, इसलिए मैं सभी "चयनित" पाई स्लाइस का चयन कर रहा हूं, और उनमें से प्रत्येक के लिए, संलग्न "क्लिक" कॉलबैक को पुनर्प्राप्त करना (जिसे मैंने कोड के दूसरे भाग में संलग्न किया है, डी 3 का उपयोग करके यहां शामिल नहीं है। ऑन () विधि) और फिर सही संदर्भ में अपेक्षित पैरामीटर के साथ आविष्कार।

d3.selectAll("g.selected").each(function(d, i) {
    var onClickFunc = d3.select(this).on("click");
    onClickFunc.apply(this, [d, i]);
});                



मैं इस धागे को कोणीय इकाई परीक्षण के लिए एक डी 3 mousemove घटना की तलाश में आया था।

@natevw उत्तर

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

माउसओवर घटना पर बहुत मदद की। लेकिन, mousemove को लागू करने के लिए एक e.source शून्य त्रुटि दे रहा था।

चारों ओर काम प्रोग्रामिंग रूप से डी 3 घटना सेट करना था।

d3.event = document.createEvent('MouseEvent');
d3.event.initMouseEvent("mousemove");
d3.select(elm[0]).select("rect").on("mousemove")();

उम्मीद है की यह मदद करेगा।




आप माउस इवेंट प्राप्त कर सुपर मैनुअल जा सकते हैं और उन तर्कों को पार कर सकते हैं जो डी 3 अन्यथा आपके लिए उपलब्ध कराएंगे। यह अभी भी डी 3 संरचनाओं का उपयोग करते हुए इसे करने के लिए एक काफी साफ तरीका देता है। एक तत्व के लिए निम्नलिखित का उपयोग करें:

var path = g.select('path');
path.on('click').call(path.node(), path.datum());

कई तत्वों के लिए, आप प्रत्येक को बदले में ट्रिगर कर सकते हैं:

g.selectAll('path').each(function(d, i) {
  d3.select(this).on('click').apply(this, arguments);
});

उत्तरार्द्ध का उपयोग एक तत्व के लिए भी किया जा सकता है यदि आपका चयनकर्ता पर्याप्त विशिष्ट है, या यदि आप पहले से तत्व को वापस करने के लिए .select() बजाय .selectAll() का उपयोग करते हैं।




यह मेरा इसे करने का तरीका है।

g.selectAll("path").on("click", function(d, i){
                                    my_function(d, i);
                                });

मुझे कॉलबैक अज्ञात कार्यों के साथ काम मिल गया है। तो उपर्युक्त कोड के लिए, क्लिक किया गया कोई भी पथ my_function को कॉल my_function और क्लिक किए गए पथ के वर्तमान my_function d और इंडेक्स i में पास होगा।




g.select("path").trigger("click") आज़माएं g.select("path").trigger("click")




Related