속성 $를 읽을 수 없습니다. 정의되지 않았습니다.

-2

g에서이 함수를 호출하면 입력을 추가하려고하는 행 (// 여기에 표시)에 "정의되지 않은 'indexOf'속성을 읽을 수 없습니다."오류가 발생합니다. 뭔가 내가 정의되지 않은 곳을 찾을 수 없을 수도 있습니다. 이 문제를 어떻게 해결할 수 있습니까?

참고 : 라벨 및 저장된 기능으로 확인란을 만드는 것으로되어 있습니다.

작은 드라이버 코드가있는 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>

출처

2017-04-25 Holly

이 스크립트와 함께 사용되는 HTML을 게시 할 수 있습니까? – Ahmad

HTML이 있습니다. – Holly

'.append()'에 인자를 넘기고 있지 않습니다. 추가 할 내용 ** append ("input")'을 말해야합니다. https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#append – altocumulus

.append()는 인수로 CSS 선택이 필요합니다. 이 경우 입력 내용을 추가하라는 메시지 (.append("input"))를 알려 주어야합니다.

출처

2017-04-25 18:20:57 Holly

속성 $를 읽을 수 없습니다. 정의되지 않았습니다.

답변

관련 문제