Question

d3浮动气泡图

2014-11-24

1637

javascript d3.js

我正在使用 cviz-0.8.5.min.js 制作气泡图，但我想要使用 d3.js 的气泡图。它还应该带有工具提示，并且是浮动的。

我查看了 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);
}

Answer 1

您可能正在寻找这样的东西：
clustered force布局
以上演示了如何制作气泡“移动和浮动”（如果我正确理解您）并聚集在一个点上。

，下面的链接显示了如何添加工具提示（在t下查看）和其他酷功能也：
A-Z功能布局的功能