搜索
    Hi~登录注册
    查看: 182|回复: 0
    收起左侧

    多年的情怀-企鹅内裤可视化查询讨论

    [复制链接]

    31

    主题

    0

    精华

    15 小时

    在线时间

    新手上路

    Rank: 1

    积分
    23
    发表于 2019-4-23 10:02:08 | 显示全部楼层 |阅读模式
    还记得多年前企鹅内容泄露的事情吗?同时间也出了好多查询的网站,其中比较有名气的是可视化查询那个站,域名就不列出来了。

    从那时起就想他是怎么实现的,想自己也搞一个。当然,那个时候没有裤子。

    直到1年前的一天,一个基友给我寄来一条内裤,还是Mysql引擎的,欣喜若狂。不过可惜还是没能实现可视化查询。

    就在昨天,一个无聊的周末午后,和一个基友讨论企鹅内裤的时候,心血来潮,回来就开搞,几个关键词提交,百度就给了一个链接:php+mysql+d3.js,如出一辙啊。

    于是依葫芦画瓢,修改了数据库信息、字段、输出显示。代码如下:
    [HTML] 纯文本查看 复制代码
                        <form class="form" method="post" action="">
                              <div class="col-lg-12">
                                <div class="input-group">
                                  <input type="text" name="qqq" class="form-control" aria-label="...">
                                
                                  <span class="input-group-btn">
                                    <button class="btn btn-success" name="searchqq" type="submit">搜</button>
                                  </span>
                                </div><!-- /input-group -->
                              </div><!-- /.col-lg-6 -->
                        </form>
    <?php 
      $con= mysqli_connect("localhost","root","r0Ot","cs");
      if(!$con)
      {
         die('Could not connect: ' . mysql_error());
      }
      mysqli_query($con,'set names utf8');
     
      $des = isset($_REQUEST['qqq'])&&isset($_REQUEST['searchqq'])?($_REQUEST['qqq']):""; 
     
      $sql = "select distinct QQNum,QunNum from qundata where QQNum= '{$des}' ";
      $query = mysqli_query($con,$sql);
      $link="";
      while($result= mysqli_fetch_assoc($query)){
        $data[]=$result;
      }
      //一层关系
      $p=0;
      $source = 0;
      $source1 = 0;
      foreach ($data as $row ){
        $Target = $row['QQNum'];
        $IPaddress = $row['QunNum'];
        //nodes0
        if($p++==0){
          $node[]= '{"name":"'.$Target.'","group":1}';
        }
        $node[]= '{"name":"'.$IPaddress.'","group":1}';
        //links0
        $source++;
        $link .= '{"source":'.$source.',"target":0,"value":'.rand(1,10).'},';
        $target = $source;
        $source1= $source;
      
      //二层关系
        $sql1 = "select distinct QQNum,Nick,QunNum from qundata where QunNum = '{$IPaddress}'";
        $query1 = mysqli_query($con,$sql1);
        $rows = mysqli_num_fields($query1);
        while ($result1 = mysqli_fetch_assoc($query1)) {
            $data1[] = $result1;
          }
        foreach ($data1 as $row1) {
          $Target1 = $row1['QQNum'];
          $IPaddress1 = $row1['QunNum'];
          //nodes1
          if (!in_array('{"name":"'.$Target1.'","group":2}',$node)) {
            $node[]= '{"name":"'.$Target1.'","group":2}';
            //links1
          $source1++;
          $link .= '{"source":'.$source1.',"target":'.$target.',"value":'.rand(1,10).'},';
          $source++;
        }
          }
          
      }
     
     
     
     $json_n = json_encode($node); 
     $nodes = '{"nodes":'. $json_n ;
     $json_l= json_encode($link);
     $links = '"links":['.$json_l.']}';
     
     $json_f = $nodes.$links;
     
       $new1 = str_replace('\"','"',$json_f);
       $new2 = str_replace('"{','{',$new1);
       $new3 = str_replace('}"','}',$new2);
       $new4 = str_replace('}]"','}],"', $new3);
       $json = str_replace('},"]}','}]}', $new4);
     
     
    file_put_contents("force.json",$json);
     
     // echo "json文件已生成";
      ?>
    <html>
    <head>
            <meta charset="utf-8">  
            <title>QQ群关系查询</title>  
            <link rel="stylesheet" type="text/css" href="static/bootstrap.min.css">
     
    <style>
     
    .link {
      stroke: #666;
    }
     
    .node text {
      pointer-events: none;
      font: 10px sans-serif;
     
    .container {
      margin-top: 30px;
    }
    }
     
    </style>
    </head>
    <body>  
    <div class="container">
      <div class="row">
        <div class="col-md-3">
    
            <?php
    echo <<<JIANCE
          <table class="table">
            <thead>
              <tr>
                <th>群号码</th>
                <th>QQ号码</th>
                <th>昵称</th>
              </tr>
            </thead>
            <tbody>
    JIANCE;
                foreach($data1 as $row1){
            ?>
              <tr>
                <td><?php echo $row1['QunNum']; ?></td>
                <td><?php echo $row1['QQNum']; ?></td>
                <td><?php echo $row1['Nick']; ?></td>
              </tr>
            <?php
            }
            ?>
            </tbody>
          </table>
        </div>
        <div class="col-md-9 graph"></div>
      </div>
    </div>
    <script src="https://d3js.org/d3.v3.js" charset="utf-8"></script>  
    <script>    
        var width = 1600;
        var height = 1200;
        var img_w = 17;
        var img_h = 17;
     
        var color = d3.scale.category20();
     
        var zoom = d3.behavior.zoom()
              .scaleExtent([1, 10])
              .on("zoom", zoomed);
     
      var root = d3.select(".graph").append("svg")
          .attr("width", width)
          .attr("height", height)
          .call(zoom);
     
    var svg = root.append('svg:g'); 
     
    var force = d3.layout.force()
        .gravity(.05)
        .distance(100)
        .charge(-100)
        .size([width, height]);
     
    d3.json("force.json", function(error, json) {
      if (error) throw error;
     
      force
          .nodes(json.nodes)
          .links(json.links)
          .start();
     
      var link = svg.selectAll(".link")
          .data(json.links)
        .enter().append("line")
          .attr("class", "link");
     
      var node = svg.selectAll(".node")
          .data(json.nodes)
          .enter().append("g")
          .attr("class", "node")
          .call(force.drag);
     
      node.append("circle")
          .attr("r", 5)
          .style("fill", function(d) { return color(d.group); });
     
      node.append("text")
          .attr("dx", 12)
          .attr("dy", ".35em")
          .text(function(d) { return d.name });
     
      var drag =force.drag()
                .on("dragstart",function(d,i){
                  d3.event.sourceEvent.cancelBubble = true;
                  d.fixed = true;    //拖拽开始后设定被拖拽对象为固定
                });
     
     
      force.on("tick", function() {
        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; });
     
            //限制结点的边界
            json.nodes.forEach(function(d,i){
              d.x = d.x - img_w/2 < 0     ? img_w/2 : d.x ;
              d.x = d.x + img_w/2 > width ? width - img_w/2 : d.x ;
              d.y = d.y - img_h/2 < 0      ? img_h/2 : d.y ;
              d.y = d.y + img_h/2 > height ? height - img_h/2 : d.y ;
            });
     
        node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
            .on("dblclick",function(d,i){
                      d.fixed = false;
                    })
            .call(drag);
     
     
      });
    });
     
      function zoomed () {
            svg.attr("transform", 
              "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
          } ;
          
          
            </script>  
        
        </body>
    </html>



    TIM截图20190423100018.jpg



    这里遇到一个问题,也是本帖的重点:目前没实现“按群号查询”的功能的功能--这个功能不重要!重点是没实现“突出显示群和qq图标”,这样看起来就不直观。

    有没有基友对d3.js有研究的,应该怎么修改代码实现以上2个功能。当然了,还可以实现一个功能:鼠标选定在某个qq节点上,显示对应的昵称、年龄等信息,如果可以的话,还可以对接自己的裤子显示社工检索结果。

    为了方便测试,我也提供一个force.json的样本吧。是查询的10000号得到的结果。

    如下【使用时记得去掉txt后缀】:d3.js和bootstrap的css就不上传了。




    force.json.txt (55.92 KB, 下载次数: 1, 售价: 1 网币)

    评分

    参与人数 1网币 +3 收起 理由
    菜鸟 + 3 膜拜大佬

    查看全部评分

    回复

    使用道具 举报

    游客
    回复
    您需要登录后才可以回帖 登录 | 获取账号

    快速回复 返回顶部 返回列表