使用外部json文件使用d3js创建气泡图 [英] Using External json file for creating bubble chart using d3js
问题描述
我是新手D3js，目前正试图使用此链接
d3js bubble Animated 用于创建气泡图
但是在这个链接中，他们使用的是只写在脚本中的数据。
我想要的是使用外部json文件。
i尝试替换此代码`
data：{
items：[
{text：Java，count：236}，
{文本：.Net，count：382}，
{text：Php，count：170}，
{text：Ruby，count：123
{text：D，count：12}，
{text：Python，count：170}，
{text：C / C ++ ：382}，
{text：Pascal，count：10}，
{text：Something，count：170}，
] b
$ b with
var data = d3.json（../ AnimateBubble.json，function（）{
完整代码在此处
BubbleAnimated.js
$（document）.ready（function（）{var bubbleChart = new d3.svg。 BubbleChart（{supportResponsive：true，// container：=>使用@default size：600，// viewBoxSize：=>使用@default innerRadius：600 / 3.5，// outerRadius：=>使用@default radiusMin：50，// radiusMax：use @default // intersectDelta：use @default // intersectInc：use @default // circleColor：use @default var data = d3.json（../ AnimateBubble.json ，function（）{plugins：[{name：central-click，options：{text：（更多细节），style：{font-size：12px，font-style： ，text-anchor：middle，fill：white}，italic，font-family：Source Sans Pro，sans-serif attr：{dy：65px}，centralClick：function（）{alert（Here is more details !!）;}}}，{name：lines，options：{format： 0 textField：count，classed：{count：true}，style：{font-size：28px，font-family：Source Sans Pro，sans-serif，text-anchor middle，fill：white}，attr：{dy：0px，x：function（d）{return d.cx; }，y：function（d）{return d.cy; }，font-size：14px，font-family：Source Sans Pro，sans- serif，text-anchor：middle，fill：white}，attr：{dy：20px，x：function（d）{return d.cx; }，y：function（d）{return d.cy; }}}}，} {}}}}，{font-size：50px}， 30px}，attr：{dy：40px}}]}}]}）; }）;}）;
< script src = https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.7/d3.min.js\"> ;</script> ;<!DOCTYPE html>< html>< head> < title> Hello Bubble Chart< / title> < meta charset =utf-8> < link href ='http：//fonts.googleapis.com/css？family = Source + Sans + Pro：200,600,200italic，600italic& subset = latin，vietnamese'rel ='stylesheet'type ='text / css'> ; < script src =http://phuonghuynh.github.io/js/bower_components/jquery/dist/jquery.min.js>< / script> < script src =http://phuonghuynh.github.io/js/bower_components/d3/d3.min.js>< / script> < script src =http://phuonghuynh.github.io/js/bower_components/d3-transform/src/d3-transform.js>< / script> < script src =http://phuonghuynh.github.io/js/bower_components/cafej/src/extarray.js>< / script> < script src =http://phuonghuynh.github.io/js/bower_components/cafej/src/misc.js>< / script> < script src =http://phuonghuynh.github.io/js/bower_components/cafej/src/micro-observer.js>< / script> < script src =http://phuonghuynh.github.io/js/bower_components/microplugin/src/microplugin.js>< / script> < script src =http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/bubble-chart.js>< / script> < script src =http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/central-click/central-click.js>< / script> < script src =http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/lines/lines.js>< / script> < script src =../ js / BubbleAnimated.js>< / script> < style> .bubbleChart {min-width：100px; max-width：700px; height：700px; margin：0 auto; } .bubbleChart svg {background：＃000000; }< / style>< / head>< body style =background：＃000000> < div class =bubbleChart/>< / body>< / html>
错误
未捕获语法错误：意外标识符BubbleAnimated.js
*任何人都可以帮助我解决这个问题
如果问题是愚蠢的， $ b 所以我想使用这段代码根据我有的json。
我想替换嵌入在代码中的数据，将其替换为json文件，我也有相同的数据
您的问题是一个基本的误解，有些人在第一次处理JavaScript中的回调时。我会读回一点回调。回调通常用作在未来某个时间获取数据的异步方式。你将函数传递给处理回调的函数，并且在将来数据准备就绪，它将它传递给该函数，以便您可以使用它。
所以要获取数据，而不是使用它：
var data = d3.json（../ AnimateBubble.json ，function（）{}）;
//尝试使用这里的数据不会是你期望的
这样做：
d3.json（../ AnimateBubble.json，function（data）{
/ /使用这里的数据
}）;
//尝试使用这里的数据不会工作，因为它不在范围内
所以你的例子看起来更像这样：
$（document）.ready ）{
d3.json（../ AnimateBubble.json，function（data）{
var bubbleChart = new d3.svg.BubbleChart（{
...
radiusMin：50，
// radiusMax：use @default
// intersectDelta：use @default
// intersectInc：use @default
// circleColor：use @default
data：data，
plugins：[{
...
}]
}）;
}）;
}）;
...
有关回调的注释在这里是一个简单的一个相当无用的例子（除了它能教什么）回调。
function timeout1000（cb）{
setTimeout（function（）{
if（typeof cb ===function）{
cb ）//这个100被传递给回调函数的第一个参数
}
}，1000）
}
timeout1000（function（data）{
console.log（data）// 100 logged
}）;
//注意函数是如何传递到timeout1000中的cb
在一个非常类似的方法， 这是你的JSON stringified。我只是复制它，并把它放在JSON文件。你也忘了一个结束花括号 这是我如何将javascript对象转换为正确的JSON。我只是在浏览器控制台做到快速。你只需要将你想要的对象作为JSON传递给 I am novice in D3js and currently trying to use this link
d3js bubble Animated for creating bubble charts
The Full Code goes here BubbleAnimated.js
Error Uncaught SyntaxError: Unexpected identifier BubbleAnimated.js
so i want to use this piece of code as per the json which i have .
I want to replace the data which is embedded in the code to replace it with the json file i have that too with the same data Your problem is a basic misconception some have when dealing with callbacks in JavaScript for the first time. I would read up a bit on callbacks. Callbacks are commonly used as an asynchronous way of getting data at some future time. You pass in a function to the function handling the callback, and at the future time the data is ready for you it passes it into that function so you can use it. So to get the data and use it instead of this: You would do this: So your example would look more like this: The EDIT: As a note about callbacks here is a simple kind of fairly useless example (besides what it can teach) of a callback. In a very similar way that EDIT Here is your JSON stringified. I would just copy it like that and put it in the JSON file. You also forgot an end curly brace This is how I turned the javascript object to proper JSON. I just did it in the browser console to be quick. You just need to pass the object you want as JSON to
这篇关于使用外部json文件使用d3js创建气泡图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ d3.json 方法正在调用您发送到它的函数。作为旁注，传入回调的数据完全取决于处理回调的函数（ d3.json 在您的示例中和 timeout1000
} 上面的代码示例，所以我添加了。
{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}]}
JSON.stringify（）
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}，
]
}
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() {
$(document).ready(function() {
var bubbleChart = new d3.svg.BubbleChart({
supportResponsive: true,
//container: => use @default
size: 600,
//viewBoxSize: => use @default
innerRadius: 600 / 3.5,
//outerRadius: => use @default
radiusMin: 50,
//radiusMax: use @default
//intersectDelta: use @default
//intersectInc: use @default
//circleColor: use @default
var data = d3.json("../AnimateBubble.json", function() {
plugins: [{
name: "central-click",
options: {
text: "(See more detail)",
style: {
"font-size": "12px",
"font-style": "italic",
"font-family": "Source Sans Pro, sans-serif",
//"font-weight": "700",
"text-anchor": "middle",
"fill": "white"
},
attr: {
dy: "65px"
},
centralClick: function() {
alert("Here is more details!!");
}
}
}, {
name: "lines",
options: {
format: [{ // Line #0
textField: "count",
classed: {
count: true
},
style: {
"font-size": "28px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "white"
},
attr: {
dy: "0px",
x: function(d) {
return d.cx;
},
y: function(d) {
return d.cy;
}
}
}, { // Line #1
textField: "text",
classed: {
text: true
},
style: {
"font-size": "14px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "white"
},
attr: {
dy: "20px",
x: function(d) {
return d.cx;
},
y: function(d) {
return d.cy;
}
}
}],
centralFormat: [{ // Line #0
style: {
"font-size": "50px"
},
attr: {}
}, { // Line #1
style: {
"font-size": "30px"
},
attr: {
dy: "40px"
}
}]
}
}]
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.7/d3.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Hello Bubble Chart</title>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,600,200italic,600italic&subset=latin,vietnamese' rel='stylesheet' type='text/css'>
<script src="http://phuonghuynh.github.io/js/bower_components/jquery/dist/jquery.min.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/d3/d3.min.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/d3-transform/src/d3-transform.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/extarray.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/misc.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/micro-observer.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/microplugin/src/microplugin.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/bubble-chart.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/central-click/central-click.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/lines/lines.js"></script>
<script src="../js/BubbleAnimated.js"></script>
<style>
.bubbleChart {
min-width: 100px;
max-width: 700px;
height: 700px;
margin: 0 auto;
}
.bubbleChart svg {
background: #000000;
}
</style>
</head>
<body style="background: #000000">
<div class="bubbleChart" />
</body>
</html>
* Can anyone help me solve this problem
Bare with me if problem is silly*
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
$(document).ready(function() {
d3.json("../AnimateBubble.json", function(data) {
var bubbleChart = new d3.svg.BubbleChart({
...
radiusMin: 50,
//radiusMax: use @default
//intersectDelta: use @default
//intersectInc: use @default
//circleColor: use @default
data: data,
plugins: [{
...
}]
});
});
});
...'s are for brevity and you should replace them with your code that is in that spot.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 method is calling the function you are sending in to it. As a side note data passed into a callback is completely dependent on how the function handling the callback (d3.json in your example and timeout1000 in this contrived example.) decides to send it.} on your code sample above so I added that. {"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"}]}
JSON.stringify()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"},
]
});
