কোনও রূপান্তর শেষে কলব্যাক চাওয়া

Question 1

আমাকে D3.js ব্যবহার করে একটি ফেইডআউট পদ্ধতি (jQuery এর অনুরূপ) তৈরি করতে হবে । আমাকে যা করতে হবে তা হল 0 টি ব্যবহার করে অস্বচ্ছতা সেট করা transition()।

d3.select("#myid").transition().style("opacity", "0");

সমস্যাটি হ'ল ট্রানজিশনটি কখন শেষ হয়েছে তা অনুধাবনের জন্য আমার একটি কলব্যাক দরকার। আমি কীভাবে কলব্যাক বাস্তবায়ন করতে পারি?

Question 2

আপনি রূপান্তরের "শেষ" ইভেন্টের জন্য শুনতে চান।

// d3 v5
d3.select("#myid").transition().style("opacity","0").on("end", myCallback);

// old way
d3.select("#myid").transition().style("opacity","0").each("end", myCallback);

এই ডেমোটি "ক্রম" ইভেন্টটি ব্যবহার করে অনেকগুলি ক্রম সংক্রমণের শৃঙ্খলাবদ্ধ করে।
ডোনাট উদাহরণ যে থেকে D3 সঙ্গে জাহাজ এই চেইন একসাথে একাধিক ট্রানজিশন ব্যবহার করে।
এখানে আমার নিজস্ব ডেমো যা সংক্রমণের শুরু এবং শেষের সময়ে উপাদানগুলির স্টাইলকে পরিবর্তন করে।

এর জন্য ডকুমেন্টেশন থেকে transition.each([type],listener):

যদি টাইপ নির্দিষ্ট করা থাকে, ট্রানজিশনের ইভেন্টগুলির জন্য শ্রোতা যুক্ত করে, "শুরু" এবং "শেষ" উভয় ইভেন্টকে সমর্থন করে। ক্রান্তিকালায় ধীরে ধীরে দেরি এবং সময়কাল থাকলেও শ্রোতাকে সংক্রমণের প্রতিটি পৃথক উপাদানের জন্য অনুরোধ করা হবে। প্রতিটি ইভেন্টের ক্রান্তিকালীন শুরু হওয়ার সাথে সাথে সূচনা ইভেন্টটি তাত্ক্ষণিক পরিবর্তন ট্রিগার করতে ব্যবহৃত হতে পারে। শেষ ইভেন্টটি বর্তমান উপাদানটি নির্বাচন করে thisএবং একটি নতুন ট্রানজিশন গ্রহণের মাধ্যমে বহু-পর্যায় রূপান্তর শুরু করতে ব্যবহার করা যেতে পারে । শেষ ইভেন্টের সময় তৈরি হওয়া কোনও রূপান্তর বর্তমান ট্রানজিশন আইডির উত্তরাধিকারী হবে এবং এর ফলে পূর্বনির্ধারিত একটি নতুন ট্রানজিশন ওভাররাইড করবে না।

দেখুন বিষয়ে এই ফোরামে থ্রেড আরো বিস্তারিত জানার জন্য।

সবশেষে, দ্রষ্টব্য যে আপনি যদি উপাদানগুলি ম্লান হয়ে যাওয়ার পরে কেবল সরিয়ে দিতে চান (ট্রানজিশন শেষ হওয়ার পরে), আপনি ব্যবহার করতে পারেন transition.remove()।

Question 3

একটি ছোট আপডেটের সাথে v3 এর জন্য মাইক বোস্টকের সমাধান :

  function endall(transition, callback) { 
    if (typeof callback !== "function") throw new Error("Wrong callback in endall");
    if (transition.size() === 0) { callback() }
    var n = 0; 
    transition 
        .each(function() { ++n; }) 
        .each("end", function() { if (!--n) callback.apply(this, arguments); }); 
  } 

  d3.selectAll("g").transition().call(endall, function() { console.log("all done") });

Question 4

এখন, d3 v4.0 এ, স্পষ্টভাবে ইভেন্ট হ্যান্ডলারদের স্থানান্তরের সাথে সংযুক্ত করার জন্য একটি সুবিধা রয়েছে:

https://github.com/d3/d3-Transition#transition_on

কোনও রূপান্তর শেষ হয়ে গেলে কোড কার্যকর করতে, আপনার যা যা প্রয়োজন তা হ'ল:

d3.select("#myid").transition().style("opacity", "0").on("end", myCallback);

Question 5

একটি সামান্য পৃথক পদ্ধতির যা এক সাথে চলমান অনেক উপাদানগুলির সাথে অনেকগুলি ট্রানজিশন থাকা অবস্থায়ও কাজ করে:

var transitions = 0;

d3.select("#myid").transition().style("opacity","0").each( "start", function() {
        transitions++;
    }).each( "end", function() {
        if( --transitions === 0 ) {
            callbackWhenAllIsDone();
        }
    });

Question 6

মাইক বোস্টকের সমাধানের আরও একটি সংস্করণ নীচে দেওয়া হয়েছে এবং @ কাশেসান্ডারের উত্তরে @ হিউজেস মন্তব্য দ্বারা অনুপ্রাণিত হয়েছেন। এটি transitionশেষ হওয়ার পরে একক কলব্যাক করে ।

একটি dropফাংশন দেওয়া হয়েছে ...

function drop(n, args, callback) {
    for (var i = 0; i < args.length - n; ++i) args[i] = args[i + n];
    args.length = args.length - n;
    callback.apply(this, args);
}

... আমরা এর d3মতো প্রসারিত করতে পারি :

d3.transition.prototype.end = function(callback, delayIfEmpty) {
    var f = callback, 
        delay = delayIfEmpty,
        transition = this;

    drop(2, arguments, function() {
        var args = arguments;
        if (!transition.size() && (delay || delay === 0)) { // if empty
            d3.timer(function() {
                f.apply(transition, args);
                return true;
            }, typeof(delay) === "number" ? delay : 0);
        } else {                                            // else Mike Bostock's routine
            var n = 0; 
            transition.each(function() { ++n; }) 
                .each("end", function() { 
                    if (!--n) f.apply(transition, args); 
                });
        }
    });

    return transition;
}

জেএসফিডাল হিসাবে ।

ব্যবহার transition.end(callback[, delayIfEmpty[, arguments...]]):

transition.end(function() {
    console.log("all done");
});

... বা transitionempty চ্ছিক বিলম্বের সাথে খালি থাকলে:

transition.end(function() {
    console.log("all done");
}, 1000);

... বা alচ্ছিক callbackযুক্তি সহ:

transition.end(function(x) {
    console.log("all done " + x);
}, 1000, "with callback arguments");

d3.transition.endমিলিসেকেন্ডের সংখ্যা নির্দিষ্ট করা থাকলে বা দ্বিতীয় তর্কটি সত্যবাদী হলেcallback খালি দিয়েও পাস করা প্রয়োগ করা হবে । এটি কোনও অতিরিক্ত যুক্তি (এবং কেবলমাত্র সেই যুক্তিগুলি) কাছে ফরোয়ার্ড করবে । গুরুত্বপূর্ণভাবে, এটি ডিফল্টরূপে যদি খালি থাকে তবে এটি প্রয়োগ করবে না , এটি সম্ভবত এই ক্ষেত্রে একটি নিরাপদ অনুমান।transition callbackcallbacktransition

Question 7

D3 v5.8.0 + হিসাবে, এখন এটি ব্যবহার করার একটি সরকারী উপায় রয়েছে transition.end। দস্তাবেজগুলি এখানে রয়েছে:

https://github.com/d3/d3-Transition#transition_end

বোস্টকের একটি কার্যকারী উদাহরণ এখানে:

https://observablehq.com/@d3/transition-end

এবং মূল ধারণাটি হ'ল কেবল সংযোজন দ্বারা .end(), রূপান্তরটি এমন প্রতিশ্রুতি ফিরিয়ে দেবে যা সমস্ত উপাদানকে রূপান্তরিত না করা পর্যন্ত সমাধান হবে না:

 await d3.selectAll("circle").transition()
      .duration(1000)
      .ease(d3.easeBounce)
      .attr("fill", "yellow")
      .attr("cx", r)
    .end();

আরও জন্য সংস্করণ রিলিজ নোট দেখুন:

https://github.com/d3/d3/reLives/tag/v5.8.0

Question 8

কলব্যাক ফাংশনটিতে আর্গুমেন্টগুলি কাশ্যাস্যান্ডার দ্বারা মাইক বোস্টকের সমাধানটি উন্নত করেছে :

function d3_transition_endall(transition, callback, arguments) {
    if (!callback) callback = function(){};
    if (transition.size() === 0) {
        callback(arguments);
    }

    var n = 0;
    transition
        .each(function() {
            ++n;
        })
        .each("end", function() {
            if (!--n) callback.apply(this, arguments);
    });
}

function callback_function(arguments) {
        console.log("all done");
        console.log(arguments);
}

d3.selectAll("g").transition()
    .call(d3_transition_endall, callback_function, "some arguments");

Question 9

প্রকৃতপক্ষে টাইমার ব্যবহার করে এটি করার আরও একটি উপায় রয়েছে।

var timer = null,
    timerFunc = function () {
      doSomethingAfterTransitionEnds();
    };

transition
  .each("end", function() {
    clearTimeout(timer);
    timer = setTimeout(timerFunc, 100);
  });

Question 10

আমি একটি ভেরিয়েবল ব্যবহার করে ট্রানজিশনে সময়কাল নির্ধারণ করে একটি অনুরূপ সমস্যা সমাধান করেছি। তারপরে আমি setTimeout()পরের ফাংশনটি কল করতাম । আমার ক্ষেত্রে, আমি রূপান্তর এবং পরবর্তী কলটির মধ্যে সামান্য ওভারল্যাপ চেয়েছিলাম, আপনি আমার উদাহরণে দেখতে পাবেন:

var transitionDuration = 400;

selectedItems.transition().duration(transitionDuration).style("opacity", .5);

setTimeout(function () {
  sortControl.forceSort();
}, (transitionDuration * 0.75));