2017-04-25 271 views
-2

在g上調用此函數會生成一個「Can not read property'indexOf'of undefined」錯誤,在我嘗試追加輸入的行上(標記爲// HERE)。嘗試我可能找不到未定義的地方。我該如何解決?

注意:它應該創建帶有標籤和存儲函數的複選框。

這是一個帶有一點驅動程序代碼的jsfiddle。 http://jsfiddle.net/hevans1/huxe8ros/13/

編輯:對不起,我剛剛發現一個無關的錯誤。更新了代碼。

function CheckBoxFilter() { 
    var labels = []; 
    var functions = []; 

    var updateData; 

    function chart(selection) { 
    selection.each(function() { 
     var g = d3.select(this).append("g"); 

     var checkboxes = g.selectAll("input") 
     .data(labels) 
     .enter() 
     .append() // HERE 
     .attr("class", "checkbox") 
     .attr("type", "checkbox") 
     .property("checked", true) 
     .text(function(d) { 
      return " " + d.name; 
     }); 

     updateData = function() { 
     var update = checkboxes.data(data); 

     update.exit() 
      .remove(); 

     update.enter() 
      .append("input") 
      .merge(update) 
      .attr("class", "checkbox") 
      .attr("type", "checkbox") 
      .text(function(d) { 
      return " " + d.name; 
      }); 
     }; 
    }); 
    } 

    chart.data = function(value) { 
     if (!arguments.length) return labels; 
      labels = []; 
     functions = []; 

     var len = value.length; 
     for (var i=0; i<len; i++) { 
      labels.push(value[i].name); 
      functions.push(value[i].func); 
     } 

     if (typeof updateData == "function") updateData(); 
      return chart; 
     }; 

    return chart; 
}; 

樣本數據。

var age = [{ 
    name: "0-5", 
    func: function(datum, checked) { 
    return datum.age == "0-5" && checked == true; 
    } 
}, { 
    name: "6-10", 
    func: function(datum, checked) { 
    return datum.age == "6-10" && checked == true; 
    } 
}, { 
    name: "11-15", 
    func: function(datum, checked) { 
    return datum.age == "11-15" && checked == true; 
    } 
}, { 
    name: "16-20", 
    func: function(datum, checked) { 
    return datum.age == "16-20" && checked == true; 
    } 
}, { 
    name: "21-25", 
    func: function(datum, checked) { 
    return datum.age == "21-25" && checked == true; 
    } 
}, { 
    name: "26-30", 
    func: function(datum, checked) { 
    return datum.age == "26-30" && checked == true; 
    } 
}, { 
    name: "30+", 
    func: function(datum, checked) { 
    return datum.age == "31+" && checked == true; 
    } 
}, ]; 

驅動代碼

<html> 
<head> 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
</head> 
<body> 
    <script> 
     var svg = d3.select("body").append("svg"); 

     var age_filter = CheckBoxFilter().data(age); 
     svg.call(age_filter); 
    </script> 
</body> 
</html> 
+0

你能發佈與此腳本一起使用的HTML嗎? – Ahmad

+0

有HTML。 – Holly

+0

您沒有將任何參數傳遞給'.append()'。你需要告訴它**要追加什麼**:'.append(「input」)'。 https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#append – altocumulus

回答

0

.append()需要一個CSS選擇作爲參數。在這種情況下,必須告訴它追加輸入:.append("input")

相關問題