0
我正在使用cviz-0.8.5.min.js幫助氣泡圖，但我想要使用d3.js的氣泡圖。這應該也浮動與工具提示。d3浮動氣泡圖
我登記了http://bl.ocks.org/mbostock/4063269。但它並沒有移動或浮動。我想要他們兩個。
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);
}
首先，它被認爲是粗魯的在這裏說你需要的東西儘快。其次，你是什麼意思的「浮動」？我已經搜索了'cviz-0.8.5.min.js'庫，但是找不到任何東西，你能鏈接它嗎？ – Mark 2014-11-24 15:47:54