D3.js 力导向图（小气泡围绕中心气泡）

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>气泡图1</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
 
<!--
<script src='https://touzi.sina.com.cn/view/public/js/common.js?id=20160708102080'></script> --
<script src="https://ssl-finance.sina.com.cn/xdemo/touziyi/js/circleForceMore.js" charset="gbk"></script>
<script src="https://ssl-finance.sina.com.cn/xdemo/js/touziyi2/circleforce.js" charset="gbk"></script>
<script src="https://ssl-finance.sina.com.cn/xdemo/touziyi/js/stockHotChart.js" charset="gbk"></script>
<script src="https://touzi.sina.com.cn/view/public/js/theme/index.js?id=20160708102080"></script>
<script src="https://touzi.sina.com.cn/view/public/js/pageload.js"></script> --
<script type="text/javascript" src='https://ssl-finance.sina.com.cn/sinafinancesdk/js/sf_sdk.js'></script>  --
<script src="https://ns.sinaimg.cn/finance/tzy/js/jq.js" charset="utf-8"></script> --
-->
  <script src="jquery-1.11.1.min.js"></script>
    <script src="d3.3.5.js"></script>
 
<script type="text/javascript">
//此处为点击页面打开的链接
new fChart({conc_url:"http://baidu.com",
            stock_url:"http://sina.com",w:1500,h:600}).init();
//构图
function force(option_){
 
    var width=option_.w,//848,
        height=option_.h,//560,
        padding=3,
        clusterPadding=30,
        maxRadius=50,
        riseColor='#EC4E4B',
        fallColor='#00AE66',
        zeroColor='#969696';
    var n=60,
        m=6;
    //每个群集父节点
    var parentNodes = new Array(m);
 
    var color = d3.scale.category10().domain(d3.range(m));
 
    function creatA(n_,m_){
        var arr=[],a=0;
 
        for(var i=0;i<n_;i++){
            if(i%m_==0 && i!=0)a++;
 
            arr.push(a);
        }
 
        return arr;
    }
 
    var b= creatA(n,m);
    var c=0;
    var nodes = d3.range(n).map(function() {
        var i = b[c],//Math.floor(Math.random() * m),
            r = (c%m)==0 ? 45:10;//Math.sqrt((i + 1) / m * -Math.log(Math.random())) * maxRadius;
        var d = {
            cluster: i,
            radius: r,
            name:'a',
            zf:'0',
            x: Math.cos(i / m * 2 * Math.PI) * 500 + width/2 + Math.random(),
            y: Math.sin(i / m * 2 * Math.PI) * 500 + height/2  + Math.random()
        };
        if (!parentNodes[i] || (r > parentNodes[i].radius)) parentNodes[i] = d;
        c++;
        return d;
    });
 
    var node;
    var clickStatus=0;
    var chuc=0;
    function _init(){
        var force = d3.layout.force().nodes(nodes)
                    .size([width,height])
                    .gravity(0)
                    //.linkStrength(0)
                    .charge(0);
 
        var svg = d3.select("#chart-svg").append("svg")
                    .attr("width", width)
                    .attr("height", height);
        //var drag = force.drag().on("dragstart", dragstart);
        var dragend = force.drag().on("dragend", dragendX)
                                    .on('dragstart', dragstart);
 
        var offsetX=0,offsetY=0;
        function dragendX(){
            offsetX-=d3.event.sourceEvent.x;
            offsetY-=d3.event.sourceEvent.y;
 
            offsetX=Math.abs(offsetX);
            offsetY=Math.abs(offsetY);
        }
 
        function dragstart(){
            offsetX=d3.event.sourceEvent.x;
            offsetY=d3.event.sourceEvent.y;
        }
        //构建图表和数字
        node = svg.selectAll('g')
                .data(nodes)
                .enter().append("g")
                .style('cursor','pointer')
                .on('click',function(d){
                    var url;
                    //根据半径确定是个股气泡还是题材气泡
                    if(d.radius<45){//个股
                        url=option_.conc_url+d.stockCode;
                    }else{//题材
                        url=option_.stock_url+d.concUniCode;
                    }
                    window.open(url);
                });
 
        node.append('circle')
            .style("fill",function(d){
                if(d.radius>55) d.radius=44;
                var c='#ffffff';
                if(d.zf>0 && d.radius<45)c=riseColor;
                if(d.zf<0 && d.radius<45)c=fallColor;
                if(d.zf==0&& d.radius<45)c=zeroColor;
                return c;
            })
            .style('stroke',function(d){
                var c=riseColor;
                if(d.zf>0) c=riseColor;
                if(d.zf<0) c=fallColor;
                if(d.zf==0)c=zeroColor;
                return c;
            });
 
        node.append('text')
            .attr('alignment-baseline','middle')
            .attr('text-anchor','middle')
            .text(function(d){
                return d.name;
            })
            .style('font-size',function(d){
                var size='12px';
                if(d.radius>45)size='12px';
                return size;
            })
            .style('fill',function(d){
                var c='#ffffff';
                if(d.radius>45 && d.zf>0) c=riseColor;
                if(d.radius>45 && d.zf<=0) c=fallColor;
                if(d.radius>45 && d.zf==0) c=zeroColor;
                if(d.radius<45 && d.zf==0) c=zeroColor;
                return c;
            })
            .attr('x',function(d){
                if(this.getComputedTextLength()>d.radius*2 && d.radius<45){
 
                    var top=d.name.substring(0,2);
                    var bot=d.name.substring(2,d.name.length);
 
                    d3.select(this).text(function(){return '';});
 
                    d3.select(this).append('tspan')
                        .attr('x',0)
                        .attr('y',-5)
                        .text(function(){return top;});
 
                    d3.select(this).append('tspan')
                        .attr('x',0)
                        .attr('y',10)
                        .text(function(){return bot;});
                    return '';
                }
            });
 
        node.transition()
            .duration(750)
            //.delay(function(d, i) { return i * 5; })
            .select('circle').attrTween("r", function(d) {
                var i = d3.interpolate(0, d.radius);
                return function(t) { return d.radius = i(t);
            };
        });
 
        force.on('tick',_tick).start();
        force.on('end',function(){
            clickStatus=1;
            chuc=1;
        });
    }
 
    function _update(){
        //d3.select("#chart-svg").remove();
        document.getElementById('chart-svg').innerHTML='';
        node=null;
 
        _init();
    }
 
    function _tick(e){
 
        var alpha=50 * e.alpha * e.alpha;
        node.each(function(d){
            var cluster = parentNodes[d.cluster];
            // For cluster nodes, apply custom gravity.
            if (cluster === d) return;
 
            if(chuc==0){
                var bab=(d.cluster%2 == 0)? 1:2;
                var cac= d.cluster>4 ? d.cluster-5:d.cluster;
 
                cluster.x=cac*option_.w*9/48 + 160;
                cluster.y=bab*option_.h/3;
            }
 
            var x = d.x - cluster.x,
                y = d.y - cluster.y,
                l = Math.sqrt(x * x + y * y),
                r = d.radius + cluster.radius;
            if (l != r) {
                l = (l - r) / l * alpha;
                d.x -= x *= l;
                d.y -= y *= l;
                cluster.x += x;
                cluster.y += y;
            }
        })
        .each(function(d){
            var quadtree = d3.geom.quadtree(nodes);
            var alpha2=0.5;
 
            var r = d.radius + 50 + clusterPadding,
                nx1 = d.x - r,
                nx2 = d.x + r,
                ny1 = d.y - r,
                ny2 = d.y + r;
 
            quadtree.visit(function(quad, x1, y1, x2, y2) {
                if (quad.point && (quad.point !== d)) {
                    var x = d.x - quad.point.x,
                        y = d.y - quad.point.y,
                        l = Math.sqrt(x * x + y * y),
                        r = d.radius + quad.point.radius + (d.cluster === quad.point.cluster ? padding : clusterPadding);
                    if (l < r) {
                        l = (l - r) / l * alpha2;
                        d.x -= x *= l;
                        d.y -= y *= l;
                        quad.point.x += x;
                        quad.point.y += y;
                    }
                }
                return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
            });
        })
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
        .select('circle')
        .attr('r',  function(d) { if(d.name==' ')return 0;return d.radius; });
    }
 
    this.nodes=nodes;
    this.init=_init;
    this.update=_update;
}
 
//处理数据
function fChart(option_){
 
    var _chart=new force(option_);//填充图表数据
 
    function _update(){
       _init(true);
    }
 
    function _init(update_){
        //加载题材列表
        $.post("3.json",null,function(fdata){
            //此处是因为中心气泡的排列规则并未按照数据的顺序，因此在此处写死
            var array=[0,36,12,48,24,30,6,42,18,54];
            for(var i=0;i<10;i++){
                var concInfo=fdata.dataObj[i];
                var x1=array[i];
                _chart.nodes[x1].name   =concInfo.name;
                _chart.nodes[x1].zf     =concInfo.zf;
                _chart.nodes[x1].concUniCode=concInfo.code;
                _chart.nodes[x1].radius=55; //50 + 50 * Math.abs(concInfo.zf)/100 || 5;
                /*绝对值大于10则圆圈显示固定大小
                if(Math.abs(concInfo.zf)>10){
                    _chart.nodes[i*6].radius= 50 + 50 * Math.abs(10)/100 || 5;
                }*/
                //_chart.nodes[i*6].stockNum=concInfo.num;//个股个数,暂时用不到
                //var j=0;
                //i*6-- 0,6,12,18,24,30,36,42,48,54  0,0,K=0;K<5;k++ 1,2,3,4,5 | 1,6 k=5;k<10;k++ 6,7,8,9,10  | 2 k=10;k<15;k++
                //k=i*5;k<i*5+5;k++
               console.log(concInfo.name+"--"+x1);
               var y=x1;
               for(var k=i*5;k<i*5+5;k++){
                   y++;
                   /*
                   if(k%5 == 0){
                       j++;
                   }*/
                   var stockInfo=fdata.dataObj1[k];
                   //console.log(stockInfo.name+"--"+y);
                   //console.log(stockInfo);
                   _chart.nodes[y].name  = stockInfo.name;
                   _chart.nodes[y].zf    = stockInfo.zf;
                   _chart.nodes[y].stockCode= stockInfo.code;
                   _chart.nodes[y].radius=44;// 20 + Math.abs(stockInfo.zf) * 200 || 10;
                   /*绝对值大于10则圆圈显示固定大小
                   if(Math.abs(stockInfo.zf)>10){
                       _chart.nodes[y].radius= 20 + Math.abs(10) * 200 || 10;
                   }*/
 
               }
 
            }
            console.log(_chart);
            update_?_chart.update():_chart.init();
        },"json");
 
    }
 
    this.init=_init;
    this.update=_update;
}
 
</script>
 
</head>
 
<body>
    <div id="chart-svg" style="position: relative; font-family: 'Microsoft Yahei', Arial, sans-serif '">
 
    </div>
 
    <div id="chartpopupsk"
        style="position: absolute; color: rgb(255, 255, 255); font-family: 'Microsoft Yahei', Arial, sans-serif; font-size: 12px; min-width: 185px; height: 60px; display: none; left: 388.212px; top: 635.789px; background-color: rgba(62, 62, 62, 0.8);">
        <div style="float: left; padding: 10px 0 0 10px;">
            <div id="chartpopup_name" style="font-size: 14px; border-right: 1px solid #aaa; padding: 0 5px 0 0;">个股名称暂无</div>
            <div id="chartpopup_code" style="text-align: center; border-right: 1px solid #aaa; padding: 0 5px 0 0;">个股编码暂无</div>
        </div>
        <div style="padding: 10px 10px 0 0; float: right;">
            <div id="chartpopup_price"
                style="text-align: right; font-size: 14px;">价格暂无</div>
            <div style="text-align: right;">
                <span id="chartpopup_zde" style="color: rgb(241, 18, 0);">数字1暂无</span>
                <span id="chartpopup_zdf" style="color: rgb(241, 18, 0);">数字2暂无</span>
            </div>
        </div>
    </div>
 
    <!--
    <div id="chartpopupzt"
        style="position: absolute; color: rgb(255, 255, 255); font-family: 'Microsoft Yahei', Arial, sans-serif; font-size: 14px; min-width: 150px; height: 70px; display: none; padding: 5px 10px 10px; left: 887.245px; top: 527.972px; background-color: rgba(62, 62, 62, 0.8);">
        <div>
            <div id="chartpopup_zt_name"
                style="text-align: center; font-size: 16px; padding: 5px;">概念名称暂无</div>
            <div>
                股票涨幅<span id="chartpopup_zt_zf"
                    style="color: rgb(241, 18, 0);">涨幅暂无</span>
            </div>
            <div>
                股票个数<span id="chartpopup_zt_nm">股票个数暂无</span>
            </div>
        </div>
    </div>-->
</body>
</html>

json

D3.js 力导向图（小气泡围绕中心气泡）的更多相关文章

D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决
上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...
D3.js 力导向图的显示优化
D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...
D3.js力导向图中新增节点及新增关系连线示例
大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang=&q ...
D3.js 力导向图
花了大半天看了一个八十几行的代码..心累力导向图是之前就有画过很多次的东西,但是这次的代码看上去很陌生,然后发现是D3更新了4.0.... 先贴代码 var svg = d3.select(&quo ...
D3.js 力导向图的制作
力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. ...
D3.js 力导向图的拖拽（drag）与缩放（zoom）
不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终 ...
记录d3.js 力导向图的平移缩放，类似地图导航点击某一项移动到当前位置
项目中有用到d3.js用于图结构的查询, 需求如下: 右上角有个模糊搜索功能,查询出来的结果用列表展示点击列表的某一列,要求画布移动到当前选中的节点的位置,基于画布正中间搜索出来的结果列表展示用的 ...
D3.js 力导向图（气泡+线条+箭头+文字）
<!DOCTYPE html> <meta charset="utf-8"> <style> .link { fill: none; strok ...
D3.js系列——布局：饼状图和力导向图
一.饼状图在布局的应用中,最简单的就是饼状图. 1.数据有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...

随机推荐

springcloud(十四)：搭建Zuul微服务网关
springcloud(十四):搭建Zuul微服务网关 1. 2. 3. 4.
关于构造函数及参数执行顺序说明(c#)
原文:https://blog.csdn.net/junmail/article/details/83249186 构造函数的执行顺序: 子类静态变量>子类静态构造函数>子类非静态变量&g ...
JavaSE 学习笔记之API（二十一）
API--- java.lang.Runtime: 类中没有构造方法,不能创建对象. 但是有非静态方法.说明该类中应该定义好了对象,并可以通过一个static方法获取这个对象.用这个对象来调用非静态方 ...
openstack windows2012r2 glance镜像制作
镜像实现: 密码注入修改密码根分区扩展 1.下载windows iso镜像下载地址:http://imsdn.com/MSDN-1.html 例如:cn_windows_server_2012_ ...
ace & web ide & web code editor
ace & web ide & web code editor web ide https://ace.c9.io/ https://github.com/ajaxorg/ace ht ...
ADO连接ACCESS2007及以上版本的数据库
function getaccessstr(databasename:string;password:string;accessVer:string='access2003'):string; beg ...
LeetCode234_PalindromeLinkedList (推断是否为回文链表) Java题解
题目: Given a singly linked list, determine if it is a palindrome. Follow up: Could you do it in O(n) ...
COCOS学习笔记--变速动作Speed和ActionEase
变速动作和复合动作类似.也是一种特殊的动作,它能够把不论什么动作依照改变后的速度运行.变速动作与复合动作最大的差别就是复合动作仅仅是单纯的组合一系列动作,而变速的做在组合一系列动作后还要去改变动作的运 ...
UIView加入手势然后UITableView 加入进这个View 导致UITableView 的单元格点击事件无效
#import "ViewController.h" @interface ViewController ()<UITableViewDataSource,UITableVi ...
Redis缓存数据库安全加固指导（一）
背景在众多开源缓存技术中,Redis无疑是目前功能最为强大,应用最多的缓存技术之一,参考2018年国外数据库技术权威网站DB-Engines关于key-value数据库流行度排名,Redis暂列第一 ...

D3.js 力导向图（小气泡围绕中心气泡）

D3.js 力导向图（小气泡围绕中心气泡）的更多相关文章

随机推荐

热门专题