首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >图形可视化

图形可视化
EN

Stack Overflow用户
提问于 2016-08-03 13:51:49
回答 4查看 9.3K关注 0票数 9

我正在寻找一种方法来可视化在Spark的Graphx中构建的图形。据我所知,Graphx没有任何可视化方法,所以我需要将数据从Graphx导出到另一个图形库,但我被困在这里了。我访问了这个网站:https://lintool.github.io/warcbase-docs/Spark-Network-Analysis/,但它没有任何帮助。我应该使用哪个库,以及如何导出图形。

EN

回答 4

Stack Overflow用户

发布于 2016-10-05 20:51:14

所以你可以这样做

Manning | Spark GraphX in Action

  1. 保存为gexf (图形交换格式)代码

定义节点字符串:toGexf={ "\n“+ "http://www.gexf.net/1.2draft\”version=\"1.2\">\n“+”<mode=\“静态\”defaultedgetype=\“定向\”> \n“+”\n“+ g.vertices.map(v =>”<节点id=\"“+ v._1 + "\”label=\"“+v._2 + "\“/>\n").collect.mkString +”\n“+”\n“+ g.edges.map(e =>”\n“).collect。mkString +“\n”+“\n”+ "“}

  1. 使用linkurious.js中的GEXF插件加载文件

示例:http://gregroberts.github.io

票数 14
EN

Stack Overflow用户

发布于 2018-02-04 19:58:29

您可以使用zeppelin中的GephiD3.js In Action by Elijah Meeks。检查D3.js In Action by Elijah MeeksSpark GraphX in Action by Michael S. Malak

如下所示,从scala中的齐柏林飞艇和借用自grapxInActionjs开始尝试

代码语言:javascript
复制
import org.apache.spark.graphx._
import scala.reflect.ClassTag

def drawGraph[VD:ClassTag,ED:ClassTag](g:Graph[VD,ED]) = {

val u = java.util.UUID.randomUUID
val v = g.vertices.collect.map(_._1)
println("""%html
<div id='a""" + u + """' style='width:960px; height:500px'></div> 
<style>
.node circle { fill: gray; }
.node text { font: 10px sans-serif;
     text-anchor: middle;
     fill: white; }
line.link { stroke: gray;
    stroke-width: 1.5px; }
</style>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
.var width = 960, height = 500;
var svg = d3.select("#a""" + u + """").append("svg")
.attr("width", width).attr("height", height);
var nodes = [""" + v.map("{id:" + _ + "}").mkString(",") + """];
var links = [""" + g.edges.collect.map(
e => "{source:nodes[" + v.indexWhere(_ == e.srcId) + 
"],target:nodes[" +
v.indexWhere(_ == e.dstId) + "]}").mkString(",") + """];
var link = svg.selectAll(".link").data(links);
link.enter().insert("line", ".node").attr("class", "link");
var node = svg.selectAll(".node").data(nodes);
var nodeEnter = node.enter().append("g").attr("class", "node")
nodeEnter.append("circle").attr("r", 8);
nodeEnter.append("text").attr("dy", "0.35em")
 .text(function(d) { return d.id; });
d3.layout.force().linkDistance(50).charge(-200).chargeDistance(300)
.friction(0.95).linkStrength(0.5).size([width, height])
.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; });
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}).nodes(nodes).links(links).start();
</script>
 """)
 }
票数 3
EN

Stack Overflow用户

发布于 2018-09-26 18:06:49

如果你使用的是grpahFrames,那么我已经修改了@Karol Sudol在他对GraphFrames的回答中提供的代码:

代码语言:javascript
复制
    def drawGraph[vertices:ClassTag,relations:ClassTag](g:GraphFrame) = {

    val u = java.util.UUID.randomUUID
    val v = g.vertices.select("id")


    val vertexes: Array[String] = g.vertices.select("id").rdd.map(x => x(0).toString).collect()

    val edges: Array[Array[String]] = g.edges.select("src", "dst").rdd.map(r => Array(r(0).toString, r(1).toString)).collect()

    val edgeCreation = edges.map{ edgeArray =>
   "{source:nodes["+ vertexes.indexOf(edgeArray(0).trim()) +"],target:nodes["+ vertexes.indexOf(edgeArray(1).trim())+"]}"
  }


  println("""
    <!DOCTYPE html>
     <html lang="en">
     <head>
     <meta charset="utf-8">
     <title>Graph</title>
     <div id='a""" + u + """' style='width:960px; height:500px'></div>
    <style>
    .node circle { fill: gray; }
    .node text { font: 10px sans-serif;        
    text-anchor: middle;
    fill: white; }
    line.link { stroke: gray;
    stroke-width: 1.5px; }
    </style>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
    <script>
    var width = 960, height = 500;
    var svg = d3.select("#a""" + u + """").append("svg")
    .attr("width", width).attr("height", height);
    var nodes = [""" + vertexes.map("{id:\"" + _ + "\"}").mkString(",") + """];
    var links = ["""+ edgeCreation.mkString(",") + """];
    var link = svg.selectAll(".link").data(links);
    link.enter().insert("line", ".node").attr("class", "link");
    var node = svg.selectAll(".node").data(nodes);
    var nodeEnter = node.enter().append("g").attr("class", "node")
    nodeEnter.append("circle").attr("r", 8);
    nodeEnter.append("text").attr("dy", "0.35em")
     .text(function(d) { return d.id; });
    d3.layout.force().linkDistance(50).charge(-200).chargeDistance(300)
    .friction(0.95).linkStrength(0.5).size([width, height])
    .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; });
    node.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
    });
    }).nodes(nodes).links(links).start();
    </script>
    </body>
    </html>
     """)

}
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38735413

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档