在使用 D3 進行數據可視化時，通常需要進行大量的數組操作。您可以使用 JavaScript 內置的數組方法，查找 D3 數組實用程序或下劃線 .js 或者用短劃線表示JavaScript 實用程序庫。

但是，基本上，如果你只想過濾數據的話。使用 data.filter() 函數過濾文件 countries.csv 條件為 gold > 100.

<meta charset="utf-8">
<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view011401"></div>
<script>
    async function buildView(){
        data = await d3.csv("http://cyber-life.cn/d3js-course/data/countries.csv");
        console.log(data);
        data = data.filter(function(d) { return d.gold > 100 })
        console.log(data);

        svg = d3.select("#view011401")
            .append("svg")
            .attr("width", 250)
            .attr("height", 250)
            .attr("style", "border:1px solid red;")

        svg.selectAll("circle")
             .data(data).enter()
             .append("circle")
             .attr("cx", function(d,i) {return d.gold})
             .attr("cy", function(d,i) {return d.silver})
             .attr("r", 4)
    }
    buildView();
</script>

數據過濾

關于代碼運行效果

由于在簡書上不能展示代碼的運行結果，我在網上搭建了一個 jupyter notebook http://jupyter.cyber-life.cn/lab，我將本套教程的筆記和源代碼寫在了上面，可以在線查看代碼運行效果，還可以調試代碼，有需要的同學私信我。