Поиск в JavaScript (D3)

Я хочу создать простую форму поиска, где я ищу с помощью определенного столбца в наборе данныхПоиск в JavaScript (D3)

Использование 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/) )

Любых направлений/подход будет высоко оценен

источник

2015-10-15 Pravin Singh

Простого 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="[email protected]" 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>

источник

2015-10-15 20:43:32 Mark

ответ

Смежные вопросы