d3浮动气泡图

我正在使用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); 
}

来源

2014-11-24 Jofis John

首先，它被认为是粗鲁的在这里说你需要的东西尽快。其次，你是什么意思的“浮动”？我已经搜索了'cviz-0.8.5.min.js'库，但是找不到任何东西，你能链接它吗？ – Mark 2014-11-24 15:47:54

你可能会寻找这样的事情：
Clustered Force Layout
上面演示了如何使泡沫“移动和浮动”（如果我理解正确的你），并围绕一个点群集。

下面的链接并显示了如何添加工具提示（看下T）和其他很酷的功能，以及：
A-Z features for Force Layouts

来源

2015-01-21 11:07:19

+1 [力量布局的AZ特征]（http://www.coppelia.io/2014/07/an-a-to-z-of-extra-features-for-the-d3-force-layout /）链接 – cellepo 2015-03-18 22:32:16

d3浮动气泡图

回答

相关问题