我正在 cviz-0.8.5.min.js 的帮助下处理气泡图，但我想要使用 d3.js 的气泡图。它也应该与工具提示一起 float 。
我 checkin 了 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);
}
最佳答案
您可能正在寻找这样的东西:
Clustered Force Layout
上面演示了如何使气泡“移动和漂浮”(如果我理解正确的话)并聚集在一个点周围。
下面的链接展示了如何添加工具提示(在 T 下查看)和其他很酷的功能:
A-Z features for Force Layouts
关于javascript - d3 float 气泡图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27102005/