用复选框过滤多列数据 - D3

我在D3中创建散点图，我想用复选框来过滤两个分类变量的数据。目前，我可以使用复选框过滤掉数据，但是如果我重新选中某个类别中的某个框，它将返回该类别的所有数据，而不管其他类别中的选中/未选中。我想知道如何最好根据多个变量一次过滤数据。用复选框过滤多列数据 - D3

这是我的数据和代码的简化版本：

数据（test.csv）：

color,texture,length,width 
blue,fluffy,4,1 
yellow,fluffy,5,2 
blue,grainy,3,1 
yellow,grainy,4,2 
blue,grainy,5,3 
yellow,grainy,5,4

HTML：

<!DOCTYPE html> 
<meta charset="utf-8"> 
<html lang="en"> 
    <body> 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <script type="text/javascript" src="test.js"></script> 

    <!-- Checkboxes --> 
    <div class="filter_options"> 
     <input class="color_button" id="B" value="blue" type="checkbox" 
       checked="checked">Blue</input> 
     <input class="color_button" id="Y" value="yellow" type="checkbox" 
       checked="checked">Yellow</input> 
    </div> 
    <div class="filter_options"> 
     <input class="texture_button" id="F" value="fluffy" type="checkbox" 
       checked="checked">Fluffy</input> 
     <input class="texture_button" id="G" value="grainy" type="checkbox" 
       checked="checked">Grainy</input> 
    </div> 
    </body> 
</html>

的Javascript（test.js;滤波发生在底部）：

// Set width/height/margins 
var margin = {top: 20, right: 20, bottom: 30, left: 50}; 
var w = 900 - margin.left - margin.right; 
var h = 500 - margin.top - margin.bottom; 

// Create SVG 
var svg = d3.select("body").append("svg") 
     .attr("width", w + margin.left + margin.right) 
     .attr("height", h + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


// x and y scales 
var x = d3.scale.linear() 
     .domain([0, 10]) 
     .range([0, w]); 

var y = d3.scale.linear() 
     .domain([0, 10]) 
     .range([h, 0]); 

// x axis 
var xAxis = d3.svg.axis() 
     .ticks(6) 
     .scale(x); 

// y axis 
var yAxis = d3.svg.axis() 
     .ticks(7) 
     .scale(y) 
     .orient("left"); 

// Colors for points 
var col = d3.scale.ordinal() 
    .domain(["blue", "yellow"]) 
    .range(["#3b80e8", "#ecea5f"]); 

// Add x axis ("Length") 
svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(0," + h + ")") 
    .call(xAxis) 
    .append("text") 
    .attr("x", w) 
    .attr("y", -6) 
    .style("text-anchor", "end") 
    .text("Length"); 

// Add y axis ("Width") 
svg.append("g") 
    .attr("class", "axis") 
    .call(yAxis) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text("Width"); 

// Data 
var dat; 
d3.csv("test.csv", function(data) { 
    data.forEach(function(d) { 
     d.length = +d.length; 
     d.width = +d.width; 
    }); 

    // Scatterplot 
    svg.selectAll(".dot") 
     .data(data) 
     .enter() 
     .append("circle") 
     .attr("class", "dot") 
     .attr("cx", function(d) {return x(d.length); }) 
     .attr("cy", function(d) {return y(d.width); }) 
     .attr("r", 7) 
     .style("fill", function(d) { return col(d.color); }); 

    // Filter data by color 
    d3.selectAll(".color_button").on("change", function() { 
     var selected = this.value, 
      display = this.checked ? "inline" : "none"; 

     svg.selectAll(".dot") 
      .filter(function(d) { return selected == d.color; }) 
      .attr("display", display); 
    }); 

    // Filter data by texture 
    d3.selectAll(".texture_button").on("change", function() { 
     var selected = this.value, 
      display = this.checked ? "inline" : "none"; 

     svg.selectAll(".dot") 
      .filter(function(d) { return selected == d.texture; }) 
      .attr("display", display); 
    }); 

});

在结果图中，如果我取消选中“蓝色”，则所有蓝色点消失。如果我取消选中“蓬松”，还有一点消失。如果我再检查一下“蓬松”，我回到一个黄色蓬松点以及一个蓝色蓬松点。我想我可以看到为什么会发生这种情况，因为我已经编写了代码：因为当我重新检查“蓬松”时，我不会更改颜色复选框的状态，我的数据不会根据颜色。我是D3和Javascript的全新产品，所以我不知道如何在同一时间完成多列过滤。

来源

2016-02-14 Kara Woo

以下是一种方法。用以下代码替换两个过滤代码片段：

// a function that will be responsible for updating the visibility of the dots 
function update() { 
    // colors will be the array of active colors, i.e. if only the yellow checkbox 
    // is checked, it will be ['yellow'] 
    var colors = d3.selectAll('.color_button')[0] 
    .filter(function(e) { return e.checked; }) 
    .map(function(e) { return e.value; }); 

    // same thing for the textures 
    var textures = d3.selectAll('.texture_button')[0] 
     .filter(function(e) { return e.checked; }) 
     .map(function(e) { return e.value; }); 

    // a helper function that will return the correct display value 
    // it will be called for every dot 
    function display(d) { 
    // we check if the current dot's color and texture are present in the 
    // colors and textures arrays. 
    if (colors.indexOf(d.color) !== -1 && textures.indexOf(d.texture) !== -1) { 
     return 'inline'; 
    } else { 
     return 'none'; 
    } 
    } 

    // we change the display attribute of every dot using the display function just defined 
    svg.selectAll('.dot').attr('display', display); 
} 

// we add a simple handler to all the checkboxes: every time one changes, 
// just call update 
d3.selectAll(".filter_options input").on("change", update);

来源

2016-02-14 23:35:45 Arthur

用复选框过滤多列数据 - D3

回答

相关问题