Javascript 使用外部json文件使用d3js创建气泡图

我是D3js的新手，目前正在尝试使用此链接 用于创建气泡图

But in this Link they have used data which is written in the script only . 
What i want is to use an external json File . 

i tried replacing this Code` 
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"},
      ],`

with 

      var data=  d3.json("../AnimateBubble.json", function() {

完整的代码在这里

BubbleAnimated.js

$（文档）.ready（函数（）{
var bubbleChart=新的d3.svg.bubbleChart({
是的，
//容器：=>使用@default
尺寸：600，
//viewBoxSize:=>使用@default
内半径：600/3.5，
//outerRadius:=>使用@default
半径：50，
//radiusMax：使用@default
//intersectDelta：使用@default
//intersectInc:使用@default
//circleColor:使用@default
var data=d3.json（“../AnimateBubble.json”，function（））{
插件：[{
名称：“中心点击”，
选项：{
正文：“（请参阅更多详细信息）”，
风格：{
“字体大小”：“12px”，
“字体样式”：“斜体”，
“字体系列”：“源Sans-Pro，Sans-serif”，
//“字体大小”：“700”，
“文本锚定”：“中间”，
“填充”：“白色”
},
属性：{
dy：“65px”
},
centralClick:函数（）{
警报（“这里有更多详细信息！！”；
}
}
}, {
名称：“行”，
选项：{
格式：[{//行#0
文本字段：“计数”，
分类：{
伯爵：是的
},
风格：{
“字体大小”：“28px”，
“字体系列”：“源Sans-Pro，Sans-serif”，
“文本锚定”：“中间”，
填充：“白色”
},
属性：{
dy:“0px”，
x:功能（d）{
返回d.cx；
},
y:功能（d）{
返回d.cy；
}
}
}，{//Line#1
文本字段：“文本”，
分类：{
文本：正确
},
风格：{
“字体大小”：“14px”，
“字体系列”：“源Sans-Pro，Sans-serif”，
“文本锚定”：“中间”，
填充：“白色”
},
属性：{
dy:“20px”，
x:功能（d）{
返回d.cx；
},
y:功能（d）{
返回d.cy；
}
}
}],
中心格式：[{//Line#0
风格：{
“字体大小”：“50px”
},
属性：{}
}，{//Line#1
风格：{
“字体大小”：“30px”
},
属性：{
dy：“40px”
}
}]
}
}]
});
});
});

你好，气泡图
布布利克哈特先生{
最小宽度：100px；
最大宽度：700px；
高度：700px；
保证金：0自动；
}
.bubbleChart svg{
背景：#000000；
}
您的问题是一些人第一次使用JavaScript处理回调时的一个基本误解。我会读一读回电。回调通常用作在将来某个时间获取数据的异步方式。您将一个函数传递给处理回调的函数，在将来为您准备好数据时，它会将数据传递给该函数，以便您可以使用它

因此，要获取数据并使用它，而不是此：

var data=  d3.json("../AnimateBubble.json", function() {});
// trying to use the data here wouldn't be what you expect

您可以这样做：

d3.json("../AnimateBubble.json", function(data) {
  // use the data here inside this function
});
// trying to use the data out here wouldn't work as it's not in scope

因此，您的示例更像这样：

$（文档）.ready（函数（）{
d3.json（“../AnimateBubble.json”），函数（数据）{
var bubbleChart=新的d3.svg.bubbleChart({
...
半径：50，
//radiusMax：使用@default
//intersectDelta：使用@default
//intersectInc:使用@default
//circleColor:使用@default
数据：数据，
插件：[{
...
}]
});
});
});

…
是为了简洁起见，您应该用位于该位置的代码替换它们

编辑：

关于回调的一点说明是，这里是一个简单的回调示例（除了它可以教授的内容之外）

function timeout1000 (cb) {
    setTimeout(function () {
      if(typeof cb === "function") {
        cb(100) // this 100 is passed to the callback function's first parameter
      }
    }, 1000)
}

timeout1000(function(data) {
  console.log(data) // 100 is logged
});
// note how the function is being passed into timeout1000 as cb


以一种非常类似的方式，
d3.json
方法调用您发送给它的函数。作为旁注，传递到回调中的数据完全取决于处理回调的函数（在您的示例中是
d3.json
，在这个精心设计的示例中是
timeout1000
）决定如何发送它

编辑

这是您的JSON字符串。我会像那样复制它并将其放入JSON文件中。在上面的代码示例中，您还忘记了一个末端大括号
}
，所以我添加了它

{"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"}]}

这就是我如何将javascript对象转换为正确的JSON。我只是在浏览器控制台中快速完成了这项操作。只需将所需的对象作为JSON传递给
JSON.stringify（）

我实现了你的建议，但现在它就像向我展示了我正在使用的cdn中的一个错误。错误是*Uncaught TypeError:Cannot read属性'items'of undefined*[bubble chart.js:123]（）。你可能应该将其添加到你的问题中或开始一个新问题。如果你开始一个新问题，请在这里的评论中添加链接。我可以明天再看，但是现在已经很晚了，所以我很快就要睡觉了。我猜你是在尝试访问data.items，它是这么说的。数据似乎未定义，我会确保您的json格式正确。我会把你的json的正确格式发布到我的答案中，真的很快。哦，那太好了@john。提前感谢你的支持efforts@PrateekGangwal好的，刚刚发布了编辑，没有问题。一旦您的问题得到回答，请随意标记绿色复选标记。
JSON.stringify({
      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"},
      ]
});