我是 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() {
The Full Code goes here
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: Unexpected identifier BubbleAnimated.js
* Can anyone help me solve this problem
Bare with me if problem is silly*
所以我想根据我拥有的 json 使用这段代码。 我想替换代码中嵌入的数据，将其替换为 json 文件，我也有相同的数据
最佳答案
您的问题是一些人第一次处理 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"},
]
});
关于javascript - 使用外部 json 文件使用 d3js 创建气泡图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35935495/