Javascript 将JSON数据插入D3气泡图可视化

我试图用我自己的JSON数据填充这个图（见下面的URL）。

我是JS和D3的新手。我在一个名为parse.js的文件中编写了一些代码，该文件接受file.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);

我已尝试将创建艺术家数组的parse.js文件中的艺术家数组导出/导入到index.js文件中。我尝试过将parse.js文件中的代码复制并粘贴到index.js文件中（使用小mods）。我遇到了几个错误，包括跨源策略、导出/导入语法问题等。我在谷歌上搜索了各个错误，这些错误导致我在index.html文件中添加type=“module”。不幸的是，我最终陷入了一个循环，修复一个错误会导致另一个错误

我知道最终，我需要输入对象数据，以便“text”映射到“artistName”，而“count”匹配到“frequency”。然而，我甚至无法将数据导入到index.js文件中

---

非常感谢您的帮助。谢谢

我将研究如何使用读取原始JSON文件。您需要将文件托管在Web服务器上的某个位置，但这是最常见的d3方式。谢谢您的回复！我会调查的。

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("");}
    },