Вставка данных JSON в визуализацию пузырьковой диаграммы D3

#javascript #json #d3.js

#javascript #json #d3.js

Вопрос:

Я пытаюсь заполнить этот график (см. URL ниже) своими собственными данными JSON. http://bl.ocks.org/phuonghuynh/54a2f97950feadb45b07

Я новичок в JS и D3. Я написал некоторый код в файле под названием parse.js для этого нужен файл.json и возвращает массив объектов, каждый объект имеет имя исполнителя и его частоту.

 const data = require("./file.json");

Object.size = function(obj) {
    var size = 0, key;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) size  ;
    }
    return size;
};
var size = Object.size(data);

var artists = [];

var Artfreq = function(artist, frequency)
{
    this.artist = artist;
    this.frequency = frequency;
};

for(var i = 0; i < size; i  )
{
    var k = 0;
    if(artists.length == 0)
    {
        var newArtist = new Artfreq(data[i].artistName, 1);
        artists.push(newArtist);
    }
    else
    {
        for(var j = 0; j < artists.length; j  )
        {
            if(data[i].artistName == artists[j].artist)
            {
                artists[j].frequency  = 1;
                k = 1;
            }
        }
        if(k != 1)
        {
            var newArtist = new Artfreq(data[i].artistName, 1);
            artists.push(newArtist);
        }
    }
}
console.log(artists);
  

Я проверил, что приведенный выше код работает так, как я ожидаю, с этой консолью.инструкция журнала.

Я загрузил index.js и index.html код по ссылке выше. Я не могу понять, как заменить data.item моим массивом artist.

 data: {
      items: [
        {text: "Java", count: "236"},
        {text: ".Net", count: "382"},
        {text: "Php", count: "170"},
        {text: "Ruby", count: "123"},
        {text: "D", count: "12"},
        {text: "Python", count: "170"},
        {text: "C/C  ", count: "382"},
        {text: "Pascal", count: "10"},
        {text: "Something", count: "170"},
      ],
      eval: function (item) {return item.count;},
      classed: function (item) {return item.text.split(" ").join("");}
    },
  

Я попытался экспортировать / импортировать массив artists из parse.js файл, который создает массив исполнителей для index.js досье. Я пробовал копировать и вставлять (с небольшими изменениями) в код из моего parse.js файл в index.js досье. Я столкнулся с несколькими ошибками, включая политику перекрестного происхождения, синтаксические проблемы с экспортом / импортом и т.д. Я прогуглил отдельные ошибки, которые заставили меня делать такие вещи, как добавить type = «module» в index.html досье. К сожалению, я оказываюсь в цикле, где исправление одной ошибки вызывает другую.

Я знаю, что в конечном итоге мне нужно будет ввести данные объекта, чтобы «текст» отображался на «Имя исполнителя», а «количество» соответствовало «частоте». Однако я даже не могу импортировать свои данные в это index.js досье.

Был бы очень признателен за помощь. Спасибо!

Комментарии:

1. Я бы изучил чтение исходного файла JSON с помощью d3.json . Вам нужно будет разместить файл где-нибудь на веб-сервере, но это наиболее распространенный способ d3 для этого

2. Спасибо за ваш ответ! Я изучу это.