标签: gojs
Javascript图库
我正在为一个项目寻找一个好的JavaScript Diagram库,可以是商业的.
强制性要求:
- 单击组件(或悬停)时突出显示连接的线和组件
- 能够切换组件的图像(表示一组组件)
- 放大/缩小功能
- 能够定义支持左侧右侧拖动的自定义行为
- 能够生成图表的可链接最小化地图
到目前为止,我检查了GoJs,JointJS和Draw2D,JointJS看起来最合适,但我不确定.文档和社区也很重要.因此,如果有人有这些图书馆或其他图书馆的经验,请告诉我您的经历.
帮助我使用我提到的功能为项目选择合适的库.
推荐指数
解决办法
查看次数
如何在GoJS中动态添加节点数据和链接数据？
myDiagram.model = new go.GraphLinksModel(
[
{ key: "Alpha", color: "lightblue" },
{ key: "Delta", color: "pink" }
],
[
{ from: "Alpha", to: "Alpha" },
{ from: "Delta", to: "Alpha" }
]);
我需要动态添加更多值,我该怎么做？
推荐指数
解决办法
查看次数
鼠标悬停在goJS图上添加文本
我想用JavaScript和GoJS创建一个ER(实体关系图).当鼠标悬停在节点上方以显示包含每个节点的一些信息的文本时,我也想要.我试着用这个例子,这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ER diagram</title>
<meta name="description" content="Interactive entity-relationship diagram or data model diagram implemented by GoJS in JavaScript for HTML." />
<!-- Copyright 1998-2018 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.10/go-debug.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$(go.Diagram, "myDiagramDiv", // must name or refer to the DIV HTML element
{
initialContentAlignment: go.Spot.Left,
allowDelete: false,
allowCopy: false, …推荐指数
解决办法
查看次数
网络图中的边界节点组？
我正在尝试使用 Vis JS 库实现网络图，并希望实现一组位于逻辑组（框）内的节点。VisJS 允许对节点进行分组，但没有以我正在寻找的可视化方式实现。
另一个完美执行此操作的库是 GoJS：http ://gojs.net/latest/samples/basic.html VisJS 的 另一个示例，它显示了我想要实现的网络图，但文档中没有示例：http://visjs。 org/docs/img/vis_overview.png
我想将节点放置在更大的框中以表示节点组。
实现这一点的任何想法或建议？
推荐指数
解决办法
查看次数
在ReactJs中使用GoJs
我试图在React Js中为NLP/POS-tagger项目创建一个解析器树.我发现GoJs提供了一个很酷的解析器树GoJs-parser-tree,但是我找不到react js实现的文档.我尝试了一些例子,但我无法使用它反应继承我的代码,我需要在反应中使用它
<!DOCTYPE html>
<html>
<head>
<title>Parse Tree</title>
<meta name="description" content="A collapsible tree layout with all of the leaf nodes at the same layer." />
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<link href="../assets/css/goSamples.css" rel="stylesheet" type="text/css" /> <!-- you don't need to use this -->
<script src="goSamples.js"></script> <!-- this is only for the GoJS Samples framework -->
<script id="code">
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you …推荐指数
解决办法
查看次数
如何将JSON对象从Java/Prime Faces传递给GOJS javascript文件
我有一个返回JSON对象的java类,我需要将这个JSON对象传递给gojs javascript,这里是我的gojs javascript文件的样本(gojs_org_view.js)
function init() {
var g = go.GraphObject.make; // for conciseness in defining templates
myDiagram = new go.Diagram("myDiagram"); // must be the ID or reference to div
var graygrad = g(go.Brush, go.Brush.Linear, { 0: "rgb(125, 125, 125)", 1: "rgb(86, 86, 86)", 1: "rgb(86, 86, 86)" });
var unassocArray =[{"id":"12" , "name":"Bugs Bunny", "title":"Head Bunny"},
{"id":"13" , "name":"Honey Bunny", "title":"Wife Bunny"},
{"id":"14" , "name":"Lola Bunny", "title":"Lil' Bunny"},
{"id":"15" , "name":"Mickey Mouse", "title":"Looney In Charge"}];
//一些javascript代码...........
function save() {
var …推荐指数
解决办法
查看次数
GoJS：如何更改节点填充颜色？
我正在使用 GoJS 制作图表。
我的图表配置（来自官方文档的示例）：
function init() {
//......
// define the Node template
myDiagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// define the node's outer shape, which will surround the TextBlock
$(go.Shape, "RoundedRectangle",
{
parameter1: 20, // the corner has a large radius
fill: $(go.Brush, "Linear", { 0: "rgb(254, 201, 0)", 1: "rgb(254, 162, 0)" }),
stroke: null,
portId: "", // this Shape is the Node's port, not the whole Node
fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, …推荐指数
解决办法
查看次数
GoJS 中的动画图标
我有一个包含图标的节点图：
$(go.TextBlock, {
font: '18pt Material Icons', alignment: go.Spot.LeftCenter, stroke: '#FFFFFF',
margin: new go.Margin(0, 5, 0, -34),
},
new go.Binding('text', 'statusIcon')),
我想无限地旋转 statusIcon，但前提是statusIcon匹配一个值。
我已经看过如何添加这样的 css 规则。
font: '18pt Material Icons', alignment: go.Spot.LeftCenter, stroke: '#FFFFFF',
margin: new go.Margin(0, 5, 0, -34),animation:'spin 4s linear infinite';
但我收到一个错误
试图在对象上设置未定义的属性“动画”：TextBlock
我想只有少数 css 规则被 gojs 接受TextBlock。
如何仅向节点子元素添加动画？
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
在 ng-bootstrap Angular 2 打字稿中的选项卡之间切换时如何保留以前的 ngbTab 内容
我有一个用户界面，我正在使用它ngb-tabset并ngb-tab呈现以下内容：
用户在表单上方输入一些内容，并在Graph NavigationTab下获得图形可视化，如下所示：
用户现在可以单击Semantic Query选项卡并从子组件获取信息。
但是，当用户重新单击Graph Navigation选项卡时，我收到以下错误：
myDiagram is undefined
wheremyDiagram是go.Diagram从父组件获取信息并呈现图表的实例。（GoJS）
代码
parent.component.html
<ngb-tabset>
<ngb-tab title="Graph Navigation">
<template ngbTabContent>
<explore-search-details [config]="visData" [lang]="language"></explore-search-details>
</template>
</ngb-tab>
<ngb-tab title="Semantic Query">
<template ngbTabContent>
<explore-search-semantic></explore-search-semantic>
</template>
</ngb-tab>
</ngb-tabset>
explore-search-details是一个子组件，它采用visData和language作为来自父组件的输入变量。在
explore-search-details.component.html里面有一个div如下负责渲染
Run Code Online (Sandbox Code Playgroud)<div #myDiagramDiv></div>
版本
angular 2.4.0, ng-bootstrap 1.0.0-alpha.21
编辑
我的地址中有一个错误myDiagram是一个go.Diagram类型变量，它在ngOnChanges()和ngAfterViewInit()生命周期钩子中使用，在选项卡切换回后未定义。
推荐指数
解决办法
查看次数
标签 统计
gojs ×10
javascript ×9
diagram ×2
add ×1
angular ×1
draw2d ×1
fill ×1
graph ×1
html ×1
jointjs ×1
jquery ×1
json ×1
mousehover ×1
ng-bootstrap ×1
nodes ×1
primefaces ×1
reactjs ×1
typescript ×1