Как использовать несколько связанных наборов данных?

Question

У меня есть несколько связанных файлов данных json. Не давая слишком много информации о проприетарных данных, и сделать ее простой ...

Скажем, один файл json "businesses" описывает предприятия с указанием их имени, адреса и т. Д. И уникального идентификатора. Это число в сотнях тысяч.

Затем еще один файл json "ratings" имеет рейтинги 1-5 для предприятий, предоставленных клиентами, с помощью уникального идентификатора клиента и идентификатора бизнеса. Все рейтинги соответствуют предприятиям в "businesses" (надеюсь). "ratings" - это гораздо меньший файл, и на самом деле я использую только 1000 из десятков тысяч оценок, которые у меня есть.

У меня есть другие связанные файлы, но я просто ограничу их пока.

Скажем, я делаю какую-то диаграмму d3 рейтингов, такую ​​как гистограмма, где каждая вертикальная панель представляет собой одно дело, а высота определяется их средним рейтингом.

Я хочу сделать так, чтобы, когда вы наводите курсор на панель, вы можете увидеть название компании, и, чтобы сделать это, я должен рисовать как с "businesses", так и с "ratings". Я видел примеры только с одним набором данных.

загружает два набора данных и присвоения каждого переменный:

(Обычно я проверить ошибки, но я удаление, что для простоты)

var businesses = []; 
var ratings = []; 
d3.json("data/business.json", function(json) { 
    businesses = json; 
    console.log(businesses); 
}); 
d3.json("data/rating.json", function(json) {     
    ratings = json; 
    console.log(ratings); 
});  

Оба набора данных отображается в консоли. Я делаю прутья, что-то вроде этого:

var svg = d3.select("body") 
    .append("svg") 
    .attr("width", w) 
    .attr("height", h); 
svg.selectAll("rect") 
    .data(ratings) 
    .enter() 
    .append("rect") 
    (more attribs for ht, width, fill, etc.) 

Я могу показать бизнес-идентификатор:

.append("title").text(function(d) {return "" + d.business_id ;}); 

но это просто бессмысленная строка символов, цифр, знаков переноса и подчеркивания.

Как я могу наиболее эффективно вырвать имя предприятия, которое соответствует этому ID из массива предприятий?

---

Я попытался

.append("title").text(function(d) {return getBizName(d.business_id); }); 

который вызывает

var getBizName = function(bizId) { 
    var i; 
    for (i=0; i<businesses.length; i++) { 
     if (businesses[i].business_id==bizId) return businesses[i].name; 
    } 
}; 

Это не работает. Я пробовал несколько подходов, и если я получу названия, чтобы они появились вообще, они сказали undefined. Если я нахожу getBizName(some-valid-business-id) в консоли, он говорит some-valid-business-id is not defined.

Любые идеи? Имейте в виду, что я новичок в этом, поэтому я делаю много глупых ошибок. Я тоже сон. Благодарю.

Answer 1

Поскольку я не знаю структуру вашего массива businesses и ratings, я не уверен, что случилось с вашей функцией getBizName, но в целом эта техника будет работать нормально.

Смотрите пример здесь (зависший над решеткой показывает название компании): http://jsfiddle.net/n1qnyv9u/

Если name находится где-то еще глубже внутри businesses массива, вы можете получать доступ к его неправильно.

Edit: Так вы говорите, что businesses, как правило, большой набор данных и ratings гораздо меньше, вы можете захотеть использовать array.map обновить ratings включить name загодя. Таким образом, вам не нужно называть getBizName каждый раз, когда заводится панель ratings.

После получения данных в businesses и ratings, сделайте следующее:

ratings.map(function(a) { 
    a.business_name=getBizName(a.bid); 
    return a; 
    } 
); 

Теперь ratings включает business_name. При построении заголовка элемента, просто используйте business_name, как показано ниже:

.append("title").text(function(d) { return d.business_name; }); 

Обновлено скрипку здесь: http://jsfiddle.net/n1qnyv9u/2/

Вы также можете посмотреть на https://github.com/Caged/d3-tip для лучшего вида всплывающих подсказок.