我开始学习 D3.js 并想使用强制布局编写一个简单的应用程序。目标是创建 3 个 float 节点，并且可以使用鼠标拖动。这就是我使用文档的程度，但是我看到的只是窗口左上角的一个小黑色圆圈(我假设所有三个圆圈都在那里重叠)。我对每个步骤都发表了评论 - 至少我认为他们正在这样做。
<!doctype html>
<html>
<head>
<title>Simple Force Layout</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>
</head>
<body>
<div id="canvas"></div>
<script type="text/javascript">
var conf = {
canvasWidth: 600,
canvasHeight: 400
}
var nodes = [
{ 'name': 'Node 1' },
{ 'name': 'Node 2' },
{ 'name': 'Node 3' }
];
// Add nodes to force layout and start it
var force = d3.layout.force()
.nodes(nodes)
.size([conf.canvasWidth, conf.canvasHeight])
.start();
// Create an svg element
var svg = d3.select("#canvas")
.append("svg:svg")
.attr("width", conf.canvasWidth)
.attr("height", conf.canvasHeight);
// Create a circle for each node
var circle = svg.append("svg:g").selectAll("circle")
.data(force.nodes())
.enter().append("svg:circle")
.attr("r", 6)
.call(force.drag);
</script>
</body>
</html>
我的问题:
- 我错过了什么？我还需要做什么才能使节点 float 并可拖动？
- 我想要一个混合节点或圆形和矩形节点(基于节点的某些属性)。我该怎么做？
当我运行应用程序时，我在 Firebug 中看到以下错误:
“网络错误:404 未找到 - http://mbostock.github.com/d3/d3.geom.js?1.29.1” d3.geom.js?1.29.1
“网络错误:404 未找到 - http://mbostock.github.com/d3/d3.layout.js?1.29.1”
这是为什么呢？我尝试过的一些强制布局示例也给出了此错误，但它们似乎工作正常!
最佳答案
我将尝试通过向您展示有效的示例来回答您的问题。
强制布局有一个特殊性，它首先显示 屏幕上部的所有节点。由于您的节点有 它们之间没有链接(如果有，我在您的代码中看不到它) 它们被绘制在彼此之上是正常的。你可以尝试 通过设置 X 和 Y 属性来修复此初始渲染 节点到屏幕上的随机位置。至于 float 问题:我不是 100% 确定这会起作用，因为我还没有测试过它， 但你可以尝试对你的节点施加不同的力，或者在 至少在显示窗口的 Angular 落。这将确保 他们移动并且不会离开屏幕(或使用窗口的 边界框)。另外你还需要检查一些相关的力属性 如果您想确保布局的速度和稳定性 节点将始终移动，而不仅仅是 float 一段时间并保持在 固定位置。对于可拖动的节点，请调用 force.drag ，如下所示 http://bl.ocks.org/1095795
这个例子展示了如何在 View 中呈现不同形状的节点。 力布局:http://bl.ocks.org/1062383 .
我建议使用 D3 的单文件版本，它通常具有 名为 d3v2 或类似文件的文件...您可能无法 由于网络问题或 CORS 问题而访问这些文件，或者 类似的东西，意味着浏览器不会向您提供 文件。您似乎使用了非常旧的 D3 版本(一年了？)。 A 看起来更像您在下一个片段中看到的版本 可能不会向您抛出该错误:如果您 不能使用在线版本，只需下载文件并将其放入 同一目录。
稍微玩一下 D3 示例并阅读文档。
关于javascript - 使用 D3.js 编写简单的力布局应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10679720/