Javascript d3浮动气泡图
我在cviz-0.8.5.min.js的帮助下制作气泡图，但我想要使用d3.js的气泡图。工具提示也应该是浮动的 我登记了。但它不是在移动或浮动。我两个都要Javascript d3浮动气泡图,javascript,d3.js,Javascript,D3.js,我在cviz-0.8.5.min.js的帮助下制作气泡图，但我想要使用d3.js的气泡图。工具提示也应该是浮动的 我登记了。但它不是在移动或浮动。我两个都要 json ----- [{"hod":"Speeding","age":"17-19","score":1}, {"hod":"Speeding","age":"20-30","score":10}, {"hod":"Speeding","age":"31-40","score":5}, {"hod":"Speeding","age":"&
json
-----
[{"hod":"Speeding","age":"17-19","score":1},
{"hod":"Speeding","age":"20-30","score":10},
{"hod":"Speeding","age":"31-40","score":5},
{"hod":"Speeding","age":">40","score":2},
{"hod":"Hard Braking","age":"17-19","score":15},
{"hod":"Hard Braking","age":"20-30","score":41},
{"hod":"Hard Braking","age":"31-40","score":14},
{"hod":"Hard Braking","age":">40","score":9},
{"hod":"Sharp Left turn","age":"17-19","score":16},
{"hod":"Sharp Left turn","age":"20-30","score":120},
{"hod":"Sharp Left turn","age":"31-40","score":60},
{"hod":"Sharp Left turn","age":">40","score":65},
{"hod":"Sharp Right turn","age":"17-19","score":20},
{"hod":"Sharp Right turn","age":"20-30","score":71},
{"hod":"Sharp Right turn","age":"31-40","score":64},
{"hod":"Sharp Right turn","age":">40","score":169}]
bubble.html
-----------
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Trips-Bubble</title>
<script type="text/javascript" src="https://cviz-core.appspot.com/static/cviz-0.8.5.min.js"></script>
<style type="text/css">
@import url("https://cviz-core.appspot.com/static/cviz-0.8.5.min.css");
@import url("https://cviz-core.appspot.com/static/cviz-studio-0.8.5.min.css");
</style>
</head>
<body style="height: 1000px">
<div class="studio container" id="visualization-container" style="width: 100%; height: 100%">
<div style="position: absolute; text-align: center; height: 100%; width: 100%;">
<h2>Trips by Time of Day and Age Group</h2>
<ul id="picker"></ul>
<div class="gallery"><div style="width:100%;height:100%" id="chart"></div></div>
</div>
</div>
<script src="bubble.js"></script>
</body>
</html>
bubble.js
---------
$(window).ready(function() {
jQuery.ajax({
url: "bubble.json",
dataType: "json",
beforeSend: function(xhr) {
if(xhr.overrideMimeType) {
xhr.overrideMimeType("application/json");
}
},
error: function(xhr, errText, err) {
console.log(err);
},
success: function(data, okText, xhr) {
renderGTODemographics(data);
}
});
});
var graphRunner;
function renderGTODemographics(data) {
graphRunner = cviz.widget.MultiGraph.Runner({
container: {id: "#chart", width: 960, height: 540},
bindings: {level1: "age", level2:"hod", value:"score"},
scaling: {radius: 1},
picker: {id: "#picker", labels: ["Everyone","By Age","By Time of Day"]},
tooltip: {width: 250, height: 40, offsetX: 1, offsetY: 1, labels: {level1: "Age", level2: "Time of day", count: "No of Trips"}}
}).graph().render(data);
}
json
-----
[{“hod”：“超速”，“年龄”：“17-19”，“分数”：1}，
{“hod”：“超速”，“年龄”：“20-30”，“分数”：10}，
{“hod”：“超速”，“年龄”：“31-40”，“分数”：5}，
{“hod”：“超速”，“年龄”：“>40”，“分数”：2}，
{“hod”：“急刹车”，“年龄”：“17-19”，“分数”：15}，
{“hod”：“急刹车”，“年龄”：“20-30”，“分数”：41}，
{“hod”：“急刹车”，“年龄”：“31-40”，“分数”：14}，
{“hod”：“急刹车”，“年龄”：“>40”，“分数”：9}，
{“hod”：“急左转”，“年龄”：“17-19”，“分数”：16}，
{“hod”：“急左转”，“年龄”：“20-30”，“分数”：120}，
{“hod”：“急左转”，“年龄”：“31-40”，“分数”：60}，
{“hod”：“急左转”，“年龄”：“>40”，“分数”：65}，
{“hod”：“急右转”，“年龄”：“17-19”，“分数”：20}，
{“hod”：“急右转”，“年龄”：“20-30”，“分数”：71}，
{“hod”：“急右转”，“年龄”：“31-40”，“分数”：64}，
{“hod”：“急右转”，“年龄”：“>40”，“分数”：169}]
bubble.html
-----------
绊倒泡沫
@导入url（“https://cviz-core.appspot.com/static/cviz-0.8.5.min.css");
@导入url（“https://cviz-core.appspot.com/static/cviz-studio-0.8.5.min.css");
按时间和年龄组列出的行程
bubble.js
---------
$（窗口）.ready（函数（）{
jQuery.ajax({
url:“bubble.json”，
数据类型：“json”，
发送前：函数（xhr）{
if（xhr.overrideMimeType）{
重写emimetype（“application/json”）；
}
},
错误：函数（xhr、errText、err）{
控制台日志（err）；
},
成功：函数（数据、okText、xhr）{
renderGTODemographics（数据）；
}
});
});
var graphRunner；
函数renderGTODemographics（数据）{
graphRunner=cviz.widget.MultiGraph.Runner({
容器：{id:#图表”，宽：960，高：540}，
绑定：{level1:age，level2:hod，value:score}，
缩放：{半径：1}，
挑选者：{id:#挑选者，标签：[“每个人”，“按年龄”，“按时间”]}，
工具提示：{宽度：250，高度：40，偏移量：1，偏移量：1，标签：{level1:“年龄”，level2:“一天中的时间”，计数：“行程数”}
}).graph（）.render（数据）；
}
上面演示了如何使气泡“移动和浮动”（如果我理解正确的话）并围绕一个点聚集 下面的链接显示了如何添加工具提示（在T下查看）和其他很酷的功能：
首先，在这里说你需要尽快买东西被认为是不礼貌的。第二，“浮动”是什么意思？我在谷歌上搜索了库
cviz-0.8.5.min.js