मैं "चयनित"

Question

के रूप में फ़ॉर्म विकल्प सेट करने के लिए डी 3 (या सिर्फ जावास्क्रिप्ट) का उपयोग कैसे कर सकता हूं, मैं डी 3 सीखने की कोशिश कर रहा हूं। क्या एक सुरुचिपूर्ण एक चुनिंदा फॉर्म तत्व में सभी विकल्पों को खोजने के लिए एक तरीका है और "चयनित" के रूप में मिलान मान के साथ एक विकल्प निर्दिष्ट करें? http://jsfiddle.net/sspboyd/LzrAC/2/

धन्यवाद:

var xStat = "G"; 

var statOptions = { 
    "Points": "PTS", 
    "Goals": "G", 
    "Assists": "A", 
    "Penalty Minutes": "PIM" 
}; 

// create the select element 
var selectUI = d3.select("#horse").append("form").append("select"); 

// create the options 
selectUI.selectAll("option").data(d3.keys(statOptions)).enter().append("option").text(function(d) { 
    return d; 
}); 

// add values to the options 
selectUI.selectAll("option").data(d3.values(statOptions)).attr("value", function(d) { 
    return d; 
}); 


// create a func to check if the value of an option equals the xStat var 
// if yes, set the attribute "selected" to "selected" 
var checkOption = function(e, i, a) { 
    if (e[i]["value"] === xStat) { 
     return e[i].attr("selected", "selected"); 
    } 
}; 

// selectUI.selectAll("option").forEach(checkOption); 
selectUI.selectAll("option").call(checkOption);​ 

मैं अपने यहाँ ऐसा करने पर उनके काम न करने का प्रयास शामिल किया है।

Answer 1

ब्रेकपॉइंट्स के साथ कुछ मूल्यों की जांच करने के बाद मैंने यह पता लगाया है कि यह कार्य कैसे करें। समस्या कोड की आखिरी कुछ पंक्तियों के साथ थी। संशोधित (और काम) कोड यह है:

var checkOption = function (e) { 
    if(e === xStat){ 
     return d3.select(this).attr("selected", "selected"); 
    } 
}; 

selectUI.selectAll("option").each(checkOption); 

मैं दो बात बिगड़ रही थी। सबसे पहले, मैं .each() (each/call API reference) के बजाय .call() का उपयोग कर रहा था।

दूसरा, मैंने माना था कि selectUI में विकल्प तत्वों का चयन करना मुझे HTML तत्वों का एक सरणी देगा जो मैं प्रत्येक सरणी प्रविष्टि के 'मान' की तलाश करके परीक्षण कर सकता हूं। कंसोल को देखकर (धन्यवाद क्रोम) मैंने अंततः यह पता लगाया कि मुझे वास्तव में प्रत्येक विकल्प प्रविष्टि के मूल्य मिल रहे थे। मुझे नहीं पता कि यह मामला क्यों है। मुझे यह जानना अच्छा लगेगा कि कोई समझा सकता है या नहीं। इसके अलावा, मैंने 'इस' के माध्यम से विकल्प तत्व का संदर्भ देना समाप्त कर दिया, कोई विचार नहीं कि यह क्यों काम करता है।

उम्मीद है कि यह किसी और की मदद करेगा। मैंने jsfiddle उदाहरण को अब काम करने वाले कोड में अपडेट किया है। http://jsfiddle.net/sspboyd/LzrAC/3/

स्टीफन

Answer 2

इस अपने आप को याद दिलाने के लिए और क्योंकि मैं किसी अन्य समाधान नहीं पा सके जोड़ा जा रहा है। धन्यवाद स्टीवन आपके कोड ने मुझे सही दिशा में रखा, लेकिन मैं इसका उपयोग नहीं कर सका क्योंकि मेरे पास तुलना करने के लिए स्थिर चर नहीं था। i.e xStat। मेरा मान डेटासेट में था जो पहले स्थान पर चयन करने के लिए उपयोग किया जाता था।

मैंने इसका उपयोग किया, इसका सरल और मतलब है कि आप विभिन्न डेटासेट से तुलना कर सकते हैं - हालांकि मुझे कोई त्रुटि नहीं मिली है, यह चुनिंदा टैग में एक अतिरिक्त विशेषता जोड़ती है। कोड है:

var f = c.append("select") 
     .attr("id", "dpc") 
     .attr("value", function (d) { return d.Primary_CauseID }) 
     .style("height", "30px"); 

    var temp2 = f.selectAll("option").remove(); 

    d3.json("key_data21.aspx", function (dataset) { 
    temp2.append("option") 
    .data(dataset) 
    .enter() 
    .append("option") 
    .attr("value", function (d) { return d.InsertID }) 
    .attr("selected", function (d) { if (d.InsertID == (f.attr("value"))) { return "selected" } }) 
    .text(function (d) { return d.Desc_Text }); 

चयनित विकल्प के लिए मेरे मूल्य एक और डाटासेट (d.Primary_CauseID) में है, लेकिन यह भी एक स्थिर मूल्य हो सकता है। बस इसे चुनिंदा टैग में एक मान विशेषता के रूप में जोड़ें, और फिर विकल्प बनाते समय (f.attr ("value")) का उपयोग करके चयन टैग पढ़ें। ऐसा लगता है कि काम करता है।

Answer 3

यह काम करने के लिए प्रकट होता है:

selectUI.property("value", xStat); 

नौसिखिया अपने आप को और एक ही मुद्दे पर fumbling था। यदि यह सही तरीका नहीं है, तो मुझे यह जानने में दिलचस्पी होगी कि क्या है।

http://jsfiddle.net/saipuck/LzrAC/9/