केवल d3.js

Question

के साथ तत्वों को अद्यतन करने का चयन करें d3.jsjoin क्या 'प्रवेश' तत्वों से अलग-अलग 'अपडेटिंग' तत्वों का चयन करने का कोई तरीका है?

updateAndEnter = d3.selectAll('element').data(data); 

entering = updateAndEnter.enter(); 

exiting = updateAndEnter.exit(); 

updatingOnly = ??; 

Answer 1

हां, डेटा में शामिल होने के बाद चयन में 'केवल अपडेट' तत्व शामिल हैं। प्रवेश() चयन में शामिल होने के बाद, इसे प्रवेश तत्वों को शामिल करने के लिए भी विस्तारित किया जाएगा।

General Update Pattern देखें:

// DATA JOIN 
    // Join new data with old elements, if any. 
    var text = svg.selectAll("text") 
     .data(data); 

    // UPDATE 
    // Update old elements as needed. 
    text.attr("class", "update"); 

    // ENTER 
    // Create new elements as needed. 
    text.enter().append("text") 
     .attr("class", "enter") 
     .attr("x", function(d, i) { return i * 32; }) 
     .attr("dy", ".35em"); 

    // ENTER + UPDATE 
    // Appending to the enter selection expands the update selection to include 
    // entering elements; so, operations on the update selection after appending to 
    // the enter selection will apply to both entering and updating nodes. 
    text.text(function(d) { return d; }); 

    // EXIT 
    // Remove old elements as needed. 
    text.exit().remove(); 

Answer 2

यह मेरा सौभाग्य

मुझे (भी) इस एक छोटा सा भ्रामक है के लिए है: ऐसा लगता है कि केवल उपलब्ध सेट वास्तव में + अद्यतन (एक साथ मिश्रित) ENTER और है बाहर जाएं।

लेकिन अगर मैं काम करना चाहता हूं या कम से कम केवल अद्यतन तत्वों की पहचान करना चाहता हूं तो क्या होगा? मैंने एक बहुत ही सरल फ़ंक्शन लिखा है (जो निम्न है, इसे मूल HTML पृष्ठ के अंत में एक स्क्रिप्ट टैग में लपेटें) यह सरल दुविधा दिखा रहा है: मैं अद्यतन तत्वों को कैसे हाइलाइट करूं? केवल ENTER और बाहर निकलें "सही ढंग से"

प्रतिक्रिया करने के लिए यह परीक्षण करने के लिए लग रहे हैं, बस क्रोम कंसोल में टाइप करें:

manage_p(['append','a few','paragraph']) 
manage_p(['append','a few','new','paragraph']) 
manage_p(['append','paragraphs']) 

मैं हरे या लाल हाइलाइटिंग प्राप्त कर सकते हैं, मैं

हो सकता है कि सफेद नहीं मिल सकता है हम डी 3 जे चश्मे गायब हैं?

सादर, फैब्रिजियो

function join_p(dataSet) { 

var el = d3.select('body'); 
var join = el 
.selectAll('p') 
.data(dataSet); 

join.enter().append('p').style('background-color','white'); 

join.style('background-color','green').text(function(d) { return d; }); 

join.exit().text('eliminato').style('background-color','red'); 
}