d3.js में डेटा को पुन: स्थापित करने का सबसे अच्छा तरीका

Question

मैं डेटा के आधार पर सामग्री उत्पन्न करने के लिए d3.js लाइब्रेरी का उपयोग कर रहा हूं।

यहां एक सरलीकृत उदाहरण है।

data_arr = [0,1,2,3,4]; 
d3.select("#mylist").selectAll('li').data(data_arr).enter().append("li").html(
    function(d) 
    { 
     var element = document.createElement('div'); 
     element.innerHTML = '<div id="innerDiv">' + d + '</div>'; 
     return element.innerHTML; 
    }); 

यदि मैं अपनी सरणी बदलता हूं, उदाहरण के लिए नया डेटा [5,3] है। नए एचटीएमएल को पुनर्निर्मित करने और दिखाने का सबसे अच्छा तरीका कैसा है? क्या मुझे एक ही वाक्य को फिर से कॉल करना है या क्या यह एक बेहतर तरीका है?

अधिक जटिल डेटा संरचना के मामले पर विचार करें। अर्थात

data_arr = [obj1, obj2, obj3, obj4]; 

और

element.innerHTML = '<div id="innerDiv">' + d.field + '</div>'; 

अगर मैं ऐसा obj1.field = 'newValue' क्या होता है। पुनर्जन्म कैसे किया जाता है?

धन्यवाद!

Answer 1

फ़ंक्शन का उपयोग करें। उदाहरण के लिए, यहाँ एक समारोह है कि तार की एक सरणी से एक सूची से स्थापित हो जाएगा है:

function list(ul, data) { 
    var li = ul.selectAll("li").data(data); 
    li.exit().remove(); 
    li.enter().append("li"); 
    li.text(function(d) { return d; }); 
} 

अब अगर आप अपनी सूची को प्रारंभ करना चाहते हैं, तो आप कह सकते हैं:

d3.select("#list").call(list, [0, 1, 2, 3, 4]); 

फिर बाद में आप करना चाहते हैं अद्यतन, आप कह सकते हैं:

d3.select("#list").call(list, [5, 3]); 

यदि आप चाहें, (और आप विधि श्रृंखलन की जरूरत नहीं है), तो आप selection.call बिना यह लिख सकते हैं:

list(d3.select("#list"), [5, 3]);