मैंने एक सूची को गतिशील रूप से अपडेट करने के लिए d3 अपडेट पैटर्न को समझने के लिए एक बहुत ही सरल उदाहरण बनाया, क्योंकि अंतर्निहित डेटा बदलता है। लेकिन सूची उम्मीद के मुताबिक अपडेट किए बिना बड़ी और बड़ी होती जा रही है। मेरा अपेक्षित आउटपुट कुछ ऐसा दिखता है:

  • 1: 23.4564
  • 2: 45.7621
  • 3: 71.5487

यह नए बुलेट बिंदुओं को जोड़ने के बजाय मूल्यों को अद्यतन करता रहता है जैसा कि संलग्न छवि में दिखाया गया है।


<html>
<body>
    <div id="options">
        <input type="checkbox" id="1" name="1" value="1">
        <label for="1">One</label>
        <input type="checkbox" id="2" name="2" value="2">
        <label for="1">Two</label>
        <input type="checkbox" id="3" name="3" value="3">
        <label for="1">Three</label>
    </div>
    <div id="list">
        <ul>

        </ul>
    </div>
</body>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script type="text/javascript">
    var selection = d3.select("ul").selectAll("li");
    var data=[];
    window.setInterval(loadData,5000);
    function loadData() {
        data = [{id: 1, value: Math.random()*100},
            {id: 2, value: Math.random()*100},
            {id: 3, value: Math.random()*100}
        ]
        update(data);
    }

    function update(data) {
        var join = selection.data(data, (d) => d.id)
        join.enter().append("li").text((d)=>{return d.id+": "+d.value;})
        join.text((d)=>{return d.id+": "+d.value;})
        join.exit().remove()
        
    }
</script>
</html>
1
Aditya K 24 नवम्बर 2020, 19:45

1 उत्तर

सबसे बढ़िया उत्तर

आपको यह व्यवहार क्यों मिलता है इसका कारण यह है कि आप अपना मूल चयन अपडेट नहीं करते हैं:

 var selection = d3.select("ul").selectAll("li");

यह एक खाली चयन है, क्योंकि चयन अपरिवर्तनीय हैं, आपके द्वारा अद्यतन फ़ंक्शन में चीज़ें दर्ज करने के बाद यह एक खाली चयन बना रहता है। नतीजतन, आप केवल चीजों को दर्ज करेंगे क्योंकि इस खाली चयन में अपडेट करने के लिए कुछ भी नहीं है। बस इस चयन को अपडेट फ़ंक्शन में करें - इस तरह से चयन खाली नहीं होगा यदि सूची आइटम पहले ही जोड़ दिए गए हैं।

<html>
<body>
    <div id="options">
        <input type="checkbox" id="1" name="1" value="1">
        <label for="1">One</label>
        <input type="checkbox" id="2" name="2" value="2">
        <label for="1">Two</label>
        <input type="checkbox" id="3" name="3" value="3">
        <label for="1">Three</label>
    </div>
    <div id="list">
        <ul>

        </ul>
    </div>
</body>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script type="text/javascript">
   
    var data=[];
    window.setInterval(loadData,5000);
    function loadData() {
        data = [{id: 1, value: Math.random()*100},
            {id: 2, value: Math.random()*100},
            {id: 3, value: Math.random()*100}
        ]
        update(data);
    }

    function update(data) {
        var selection = d3.select("ul").selectAll("li");
        var join = selection.data(data, (d) => d.id)
        join.enter().append("li").text((d)=>{return d.id+": "+d.value;})
        join.text((d)=>{return d.id+": "+d.value;})
        join.exit().remove()
        
    }
</script>
</html>
0
Andrew Reid 24 नवम्बर 2020, 20:27