Как читать данные в d3.js из нескольких массивов JavaScript? И динамическое обновление графика без обновления страницы

Question

В настоящее время у меня есть два массива, один из них представляет собой список чисел с названием nums, а ms представляет собой список строк с заголовками мест.

Ex.

nums=[1,2,3,4,5]

places = ["house","gym", "work", "school", "park"] 

оба массива имеют одинаковую длину.

Я хочу сделать гистограмму с этими массивами, которая выглядит примерно так: http://bl.ocks.org/mbostock/3885304, но данные поступают из этих массивов, а не из файла tsv.

В коде Bostock данные считываются из файла tsv, код приведен ниже.

d3.tsv("data.tsv", type, function(error, data) {
  x.domain(data.map(function(d) { return d.letter; }));
  y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

Кроме того, я получаю обновления с сервера, и данные по определенным столбцам будут обновляться, в то время как другие столбцы являются постоянными. Вместо того, чтобы обновлять страницу, я хочу обновить бары, которые меняются. Для этого типа проекта я должен попытаться использовать что-то вроде реакции или любых других рекомендаций. Помощь здесь будет принята с благодарностью. Спасибо!!

Answer 1

Если вы хотите использовать код Майка Бостока, вы можете создать массив с именем data, со свойством num и свойством place:

var data=[]; 
for(var i=0; i<nums.length; i++){
var obj = {num: nums[i], place: places[i]};
data.push(obj);
}

Тогда вы можете избавиться от вызова d3.tsv. Очевидно, вам также нужно заменить ссылки Майка на d.letter и d.frequency на d.place и d.num.

В своем коде javascript прислушивайтесь к любым сигналам события, что данные были обновлены, а затем вызывайте метод построения диаграммы, когда это происходит.