小编gai*_*tat的帖子
在Matter.js中禁用重力
有没有办法在Matter.js中禁用重力？我希望我的物体(身体)保持其身体能力(如对碰撞,恢复原状,摩擦等的反应),但我想防止对设备的陀螺仪和方向变化的反应.
推荐指数
解决办法
查看次数
使用d3.js而不使用DOT的定向非循环图
我试图使用d3.js绘制有向无环图.在搜索布局时,我遇到了Dagre,但由于我不想在任何地方使用基于DOT的代码,因此它似乎没什么用处.如果有人知道DAG的纯Javascript解决方案或插件/自定义布局,请告诉我.提前致谢.
推荐指数
解决办法
查看次数
svg,d3,dagre,dagre-d3和graphlib如何相互依赖？
我用dagre绘制有向图,但我试图理解svg,d3,dagre和graphlib是如何相互依赖的？基本上,一个人停下来,另一个人开始.
我会尝试用我有限的理解指出我能收集到的东西.
svg :(是一种基于XML的矢量图像格式,但基本上是它)是一个html标签,使用它可以绘制圆形,椭圆形,矩形等,然后使用g元素分组两个或多个形状并应用变换等.
d3:d3是一个javascript库,它基本上允许你将数据与svg结合起来.因此,不是每次都编写svg标记,而是基本上使用编程,循环,数据等并创建svg代码.
现在来到dagre,dagre-d3和graphlib是我有一个问题,假设我上面所说的任何事情都有意义:)
dagre,dagre-d3:这是dagre页面所说的" Dagre是一个JavaScript库,可以很容易地在客户端布置有向图.dagre-d3库作为dagre的前端,提供实际渲染使用D3. "
有人可以向我解释一下吗？那么我可以在dagre,dagre-d3中使用d3函数吗？嗯......我已经很困惑了,你能用一个例子来解释这些是如何共存的吗？这个代码片段让我思考:
Run Code Online (Sandbox Code Playgroud)var oldDrawNodes = renderer.drawNodes(); renderer.drawNodes(function(graph, root) { var svgNodes = oldDrawNodes(graph, root); svgNodes.each(function(u) { d3.select(this).classed(graph.node(u).nodeclass, true); }); return svgNodes; });这里,drawNodes是dagre-d3的一个函数,但是它被覆盖了,我们在它里面传递了一个d3函数(d3.select(this).classed).嗯......这是怎么回事？我认为d3.select只能用于html元素吗？这是什么'这个'？
graphlib:这是graphlib页面,它表示它为多图形提供数据结构.但我的意思是,这些库是为d3还是为dagre-d3构建的？
我知道我听起来很困惑,但你明白了!如果有人可以向我解释一下如何将这些相关以及哪些功能可以在哪些内部使用,我将能够接受.
谢谢.
推荐指数
解决办法
查看次数
用于SVG foreignObject元素的dagre-d3 IE解决方法？
我是一名大学合作社,目前正在为我的团队开发一个网页项目.一开始,我选择使用dagre-d3库来构建图形,它们在Chrome上运行良好.然后我意识到SVG中的ForeignObject元素不能用于IE(它恰好是支持的主要浏览器).
由于我的目标主要是在每个图形组件中填充HTML内容,我想知道是否有任何解决方法在IE上仍然使用dagre-d3实现这一点.或者对不同图库的任何建议？
更新:
基本上我想创建下面屏幕截图中显示的图表:
下面是我现在使用dagre-d3构建图形的代码:
HTML代码段:
<div id="graph-section">
<svg>
<g transform="translate(20,20)" />
</svg>
</div>
JS片段:
var g = new dagreD3.Digraph();
// Construct nodes
for (var i = 0; i < data.nodes.length; i++) {
var label = "<div class='graphLabel'>";
label += "<div class='comp" + data.nodes[i].value.type + " left'> </div>";
label += "<b> " + data.nodes[i].value.name + "</b><br/>";
label += "<span class='info'>Start: " + data.nodes[i].value.start + "</span><br/>";
label += "<span class='info'>End: " + data.nodes[i].value.end + "</span><br/>";
label += "<span class='info'>Launched by " + data.nodes[i].value.user …推荐指数
解决办法
查看次数
Threejs帆布背景黑色
我用threejs的基本场景进行了试验,但我不明白为什么画布背景是完全黑色的.
<html>
<head>
<title>My first Three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%;background-color: white; }
</style>
</head>
<body>
<script src="Stereos/threejs/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
</script>
</body>
</html>
编辑:
代码在felpone.netsons.org
推荐指数
解决办法
查看次数
调整d3/dagre-d3 svg的大小以显示所有内容
我正在尝试使用dagre-d3创建DAG .这些DAG的数据来自数据库,每个DAG都有所不同,因此,在将所有节点和边添加到图之前,我不知道给出包含svg的宽度/高度.
理想情况下,我会d3.select("#svg1").resize_to_match_contents()在添加所有节点和边之后调用类似的东西,以确保所有节点都可见且svg不是太大.当然没有这样的功能,我也不知道如何实现它.我知道我可以调用d3.select("#svg1").attr("height", "10")设置高度,但不知道如何检索/计算<g>SVG内元素的高度.
推荐指数
解决办法
查看次数
Three.js示例与移动设备不完全兼容
我在移动设备上遇到"后处理/故障"示例问题.这只是造成麻烦的雪效应.在桌面上,它会在故障期间覆盖整个视图端口.在移动设备上它只出现在底部.我认为这是负责任的一线.它在DigitalGlitch.js中.
"vec4 snow = 200.*amount*vec4(rand(vec2(xs * seed,ys * seed*50.))*0.2);",
我不明白为什么要移动移动.
推荐指数
解决办法
查看次数
有没有办法获得 Three.js 的最小/精简版本
仅具有我需要的功能？常规缩小版为 411KB！
我想我可以自己设置构建过程并手动删除未使用的包，但也许有人已经这样做了？
推荐指数
解决办法
查看次数
响应图像的垂直填充
这个CSS:
.outer-img-wrap {
border: 2px solid gray;
margin: 1vw auto;
max-width: 192px;
text-align: center;
overflow: hidden;
}
.outer-img-wrap img {
width: auto !important;
height: auto !important;
max-width: 100%;
vertical-align: middle;
}
.inner-img-wrap {
background: #000;
border: thin solid #ff9900;
margin: 2px;
}
应用于此HTML:
<td style="width: 25%">
<div class="outer-img-wrap">
<div class="inner-img-wrap">
<img src="http://placehold.it/64x64" />
</div>
</div>
</td>
在适当宽度的表格单元格中生成居中的响应图像.所有图像最终都具有相同的宽度,这就是我想要的.
我也希望图像以响应的方式具有相同的高度.所以我将这个Javascript添加到页面来更新填充.
function resizeImageElements()
{
var imageElements = $(".outer-img-wrap .inner-img-wrap img");
var imageElementsMaxHeight = -1;
imageElements.map( function(index) {
// compare …推荐指数
解决办法
查看次数
在 Dagre 中向分层图中添加节点时保持相对顺序
我创建了一个简单的 Dagre 示例，用于在单击图中的现有节点时动态添加节点。但是，重新渲染会在同一层内创建不同的相对顺序。无论如何，这个问题有解决办法吗？
小提琴可以在这里找到： http: //jsfiddle.net/gke2dann/
提前致谢。
// Create a new directed graph
var g = new dagreD3.Digraph();
/* populate graph... see fiddle */
var renderer = new dagreD3.Renderer();
var layout = dagre.layout();
var render = function() {
layout.run(g);
renderer.run(g, d3.select("svg g"));
};
render();
svg.onclick = function(evt) {
var nodeId = evt.target.__data__;
for (var i = 0; i <= Math.random() * 10; ++i) {
var newNodeId = nodeId + "_sub" + i;
g.addNode(newNodeId, { label: "Bla" });
g.addEdge(null, newNodeId, nodeId); …推荐指数
解决办法
查看次数