-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>
你能發佈與此腳本一起使用的HTML嗎? – Ahmad
有HTML。 – Holly
您沒有將任何參數傳遞給'.append()'。你需要告訴它**要追加什麼**:'.append(「input」)'。 https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#append – altocumulus