【D3.JS数据可视化实战记录】绘制力学图

最新推荐文章于 2024-05-18 09:56:12 发布

追风筝的MM豆

最新推荐文章于 2024-05-18 09:56:12 发布

阅读量2.4k

点赞数

分类专栏：数据可视化文章标签： d3.js 数据可视化实例

本文链接：https://blog.csdn.net/lei_miaomiao/article/details/41248463

版权

数据可视化专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<style>
  body{
    background-color:black;
  }
  .link {
    stroke-opacity: 1;
  }

  .link_text {
    font-size: 12px ;
    font-family: "Times New Roman";
    fill:white;
    fill-opacity:1;
  }

  .node{
    cursor: pointer;
  }

  .node:hover{
    stroke-width:3px;
    stroke:white;
    stroke-opacity:1;
  }

  .node_text{
    fill:white;
    font-family: "Times New Roman";
    font-weight: bolder;
    cursor: pointer;
  }


</style>
<body>
  <svg class="correlation"></svg>

  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script>

    var width = 960;
    var height = 600;

    var svg = d3.select(".correlation")
                .attr("width",width)
                .attr("height",height);

    var poolStates = [{"name":"A","size":160,"CPU":0.5},
                      {"name":"B","size":300,"CPU":0.18},
                      {"name":"C","size":100,"CPU":0.32},
                      {"name":"D","size":80,"CPU":0.8}];
    
    var relations = [{"source":"A","target":"B","correlation":0.8},
                     {"source":"A","target":"C","correlation":0.5},
                     {"source":"A","target":"D","correlation":-0.1}];

    //使用force layout
    var force = d3.layout.force().charge(-1500).linkDistance(200).size([width,height]);

    //force.links默认的source和target是其在nodes中的index,此次自定义为他们的name.
    var edges = [];
    relations.forEach(function(e){
      var sourceNode = poolStates.filter(function(n){
        return n.name === e.source;
      })[0];
      var targetNode = poolStates.filter(function(n){
        return n.name === e.target;
      })[0];

      edges.push({
        source: sourceNode,
        target: targetNode,
        correlation: e.correlation
      });
    });


    //加载数据
    force.nodes(poolStates)
         .links(edges)
         .start();

    var colors=d3.scale.category20c();

    //根据关联强度绘制线的粗细
    var strokeScale = d3.scale.linear()
                     .domain([0,d3.max(edges,function(d){
                            return Math.abs(d.correlation);})])
                     .range([1.5,4])
                     .nice();

    //根据集群大小绘制半径的大小
    var radiusScale = d3.scale.linear()
                      .domain([0,d3.max(poolStates,function(d){return d.size;})])
                      .range([1,30]);

    
    //绘制连线
    var link = svg.selectAll("line")
                  .data(edges)
                  .enter().append("line")
                  .attr("class","link")
                  .style("stroke",function(d){
                     if(d.correlation > 0){
                        return "#FFE800";
                     }
                     return "#530FAD";
                  })
                  .style("stroke-width",1.5)
                  .style("stroke-opacity",0);

    var link_text = svg.selectAll(".link_text")
                       .data(edges)
                       .enter()
                       .append("text")
                       .attr("class","link_text")
                       .text(function(d){
                          return d.correlation;
                       });

    //绘制节点
    var node = svg.selectAll("circle")
                  .data(poolStates)
                  .enter()
                  .append("circle")
                  .attr("class","node")
                  .attr("r",function(d){return radiusScale(d.size);})
                  .style("fill",function(d){
                     if(d.CPU>0.5){
                        return "#FF4900";
                     }
                     return "#00AF64";})
                  .on("mouseover",function(d,i){d.show = true;})
                  .on("mouseout",function(d,i){d.show = false;})
                  .call(force.drag);

    //绘制文字
    var text_dx = -20;
    var text_dy = 20;

    var node_text = svg.selectAll(".node_text")
                      .data(poolStates)
                      .enter()
                      .append("text")
                      .attr("class","node_text")
                      .attr("dy",".3em")
                      .attr("dx","-.4em")
                      .on("mouseover",function(d,i){d.show = true;})
                      .on("mouseout",function(d,i){d.show = false;})
                      .text(function(d){return d.name});

      node.append("title")  
        .text(function(d) { return "pool: " + d.name+" size: "+d.size+" CPU usage: "+d.CPU;});  

      force.on("tick",function(){

        node.attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; });

        node_text.attr("x",function(d){ return d.x });
        node_text.attr("y",function(d){ return d.y });

        link.attr("x1", function(d) { return d.source.x;})
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });

        link_text.attr("x",function(d){ return (d.source.x + d.target.x) / 2 ; });
        link_text.attr("y",function(d){ return (d.source.y + d.target.y) / 2 ; });

        link_text.style("fill-opacity",function(d){
          return d.source.show || d.target.show ? 1.0 : 0.0 ;
        });

        link.style("stroke-width",function(d){
          return d.source.show || d.target.show ? strokeScale(d.correlation) : 1;
        });

        link.style("stroke-opacity",function(d){
          return d.source.show || d.target.show ? 1 : 0;
        });

      });
  </script>
</body>