无法读取未定义的属性 $答案

【问题标题】：Cannot read property $ of undefined无法读取未定义的属性 $
【发布时间】：2025-12-02 04:05:02
【问题描述】：

在 g 上调用此函数会在我尝试附加输入的行上生成“无法读取未定义的属性 'indexOf'”错误（标记为 // 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 吗？
有HTML。
您没有将任何参数传递给.append()。你需要告诉它 what 追加：.append("input")。 github.com/d3/d3-3.x-api-reference/blob/master/…
谢谢！是的，我很快就发现了。

标签： javascript d3.js

【解决方案1】：

.append() 需要一个 CSS 选择器作为参数。在这种情况下，必须告诉它附加输入：.append("input")。

【讨论】：