d3 मानचित्र चेकबॉक्स फ़िल्टरिंग

Question

मैंने एक डी 3 प्रतीकात्मक मानचित्र बनाया है और उपयोगकर्ता को 'टाइप' नामक एक विशेषता द्वारा अंक फ़िल्टर करने में सक्षम होना चाहिए। तीन प्रकार हैं: ए, बी, सी, जिनमें से प्रत्येक में एक संबंधित एचटीएमएल चेकबॉक्स है, जब चेक किया जाता है तो टाइप के बिंदु प्रदर्शित करना चाहिए, और जब अन-चेक किया गया तो उन बिंदुओं को हटा देना चाहिए। मैं सोच रहा था कि चेक/अनचेक घटना को डी 3 में पास करने का सबसे अच्छा तरीका क्या है? मैं सोच रहा हूं कि चेक किए गए प्रकारों को select.filter() में पास करने का कोई तरीका था, तो यह जाने का सबसे अच्छा तरीका होगा।

एचटीएमएल

<div class="filter_options"> 
<input class="filter_button" id="a_button" type="checkbox">a</input><br> 
<input class="filter_button" id="b_button" type="checkbox">b</input><br> 
<input class="filter_button" id="c_button" type="checkbox">c</input><br> 
</div> 

js

queue() 
.defer(d3.json, "basemap.json") 
.defer(d3.json, "points.json") 
.await(ready); 

function ready(error, base, points) { 

var button = 

svg.append("path") 
    .attr("class", "polys") 
    .datum(topojson.object(us, base.objects.polys)) 
    .attr("d", path); 

svg.selectAll(".symbol") 
    .data(points.features) 
.enter().append("path") 
    .filter(function(d) { return d.properties.type != null ? this : null; }) 
    .attr("class", "symbol") 
    .attr("d", path.pointRadius(function(d) { return radius(d.properties.frequency * 50000); })) 
    .style("fill", function(d) { return color(d.properties.type); });; 

वर्तमान में, फिल्टर सभी बिंदुओं को पकड़ने के लिए सेट कर दिया जाता:

.filter(function(d) { return d.properties.type != null ? this : null; }) 

मैं उपयोगकर्ता चाहते हैं होने के लिए यहाँ कोड है इसे बदलने में सक्षम

चीयर्स

Answer 1

कुछ इस तरह काम करना चाहिए। अपने चेकबॉक्स के लिए एक मूल्य विशेषता जोड़ें ताकि आप जान सकें कि वे किस बात का जिक्र कर रहे हैं।

d3.selectAll(".filter_button").on("change", function() { 
    var type = this.value, 
    // I *think* "inline" is the default. 
    display = this.checked ? "inline" : "none"; 

    svg.selectAll(".symbol") 
    .filter(function(d) { return d.properties.type === type; }) 
    .attr("display", display); 
});