Searching in javascript (D3)

Searching in javascript (D3)

本文关键字：D3 javascript in Searching      更新时间：2023-09-26

我想创建一个简单的搜索框，其中我使用数据集中的特定列进行搜索

使用D3和CSV数据集，我能够读取行，但我如何去搜索一个特定的列(例如:ID这里)

代码:

d3.csv("search.csv", function(d) {
  return {
    ID: d.ID, 
    history: d.History,
    objective: d.Objective,
    learning : d.Learning 
  };
}, function(error, rows) {
  console.log(rows);
});

我需要了解如何创建一个搜索功能，其中，我们可以搜索和自动建议出现。我看过各种例子，但不知道如何在D3 CSV过滤器内进行此操作。

看过的例子(http://bl.ocks.org/jjzieve/a743242f46321491a950;
http://jsfiddle.net/Mottie/ztaz6/2/))

任何方向/方法将高度赞赏

一个简单的数组。Filter应该是一个足够的"搜索"方法:

  var filterText = "some text to search";
  var filteredData = data.filter(function(d){
    return (d.ID.indexOf(filterText) === 0); // does it start with the string?
  });

这里有一个小的工作示例:

<!DOCTYPE html>
<html>
  <head>
    <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  </head>
  <body>
    <input type="text" id="filterOn" />
    <div id="filteredList"></div>
    <script>
    var data = [];
    for (var i = 0; i < 100; i++) {
      data.push({
        ID: (Math.random() * 10 + '').replace(".","")
      });
    }
    
    onFilter();
    
    d3.select('#filterOn').on('keyup', onFilter);
    
    function onFilter(){
      var filterText = d3.select('#filterOn').property('value');
      
      filteredData = data;
      if (filterText !== ""){
        var filteredData = data.filter(function(d){
          return (d.ID.indexOf(filterText) === 0);
        });
      }
      
      d3.select('#filteredList').html(
        filteredData.map(function(d){
          return d.ID;
        }).join("<br/>")
      );
    }
    
  </script>
  </body>
</html>

相关文章：