Question

我在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 Layout
以上演示了如何制作气泡＆＃34;移动和漂浮＆＃34; （如果我理解正确的话）并聚集在某一点上。

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

d3浮动气泡图

1 个答案: