我是D3js的新手，目前正在尝试使用此链接 d3js bubble Animated用于创建气泡图
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
$(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>
错误
Uncaught SyntaxError：意外的标识符BubbleAnimated.js
* Can anyone help me solve this problem
Bare with me if problem is silly*
所以我想按照我所拥有的json使用这段代码。 我想替换代码中嵌入的数据，用json文件替换它，我也用相同的数据替换它
答案 0 :(得分：2)
你的问题是第一次在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
所以你的例子看起来更像是这样：
$(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: [{
...
}]
});
});
});
...是为了简洁起见，您应该将其替换为该位置的代码。
修改
关于回调这里的注释是一个简单的回调无用的例子（除了它可以教的内容）。
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()
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"},
]
});