在 javascript (D3) 中搜索答案

【问题标题】：Searching in javascript (D3)在 javascript (D3) 中搜索
【发布时间】：2015-10-15 17:07:07
【问题描述】：

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

使用 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/) )

任何方向/方法都将受到高度赞赏

【问题讨论】：

标签： javascript csv search d3.js

【解决方案1】：

一个简单的array.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>

【讨论】：