Question

我开始学习D3.js，并希望使用强制布局编写一个简单的应用程序。目标是创建3个浮动的节点，并可以使用鼠标拖动。这是我使用文档的距离，但是我看到的只是窗口左上角的一个小黑圈（我假设这三个都在那里重叠）。我对每一步都做了评论 - 至少我认为他们正在做的事情。

<!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>

我的问题：

我错过了什么？我还需要做些什么让节点浮动并可以拖动？
我想要一个混合或圆形和矩形节点（基于节点的某些属性）。我该怎么做？
运行应用程序时，我在Firebug中看到以下错误：

“NetworkError：404 Not Found - http://mbostock.github.com/d3/d3.geom.js?1.29.1” d3.geom.js？1.29.1

“NetworkError：404 Not Found - http://mbostock.github.com/d3/d3.layout.js?1.29.1”

这是为什么？我试过的一些强制布局示例也给出了这个错误，但它们似乎工作正常！

Answer 1

我会尝试通过向您展示有用的示例来回答您的问题。

力布局具有这种特殊性，它通过显示开始屏幕上方的所有节点。既然你的节点有它们之间没有链接（如果它们在我的代码中没有看到它）他们被吸引到彼此之上是正常的。你可以尝试通过设置的X和Y属性来修复此初始渲染节点到屏幕上的随机位置。至于漂浮问题：我不是100％肯定这会起作用，因为我没有测试过，但您可以尝试对节点应用不同的力，或者至少在显示窗口的角落。这将保证他们移动，不要离开屏幕（或使用窗口边界框）。您还需要检查一些相关的力属性如果你想确定的话，速度和布局的稳定性节点将始终移动，而不只是浮动一段时间并保持在一个固定位置。要使节点可拖动，请调用 force.drag http://bl.ocks.org/1095795
此示例显示如何在节目中显示具有不同形状的节点强制布局：http://bl.ocks.org/1062383。
我建议 D3 的单个文件版本，通常有一个文件名为d3v2或类似的东西......可能你不能由于网络问题或CORS问题或访问这些文件类似的东西，意味着浏览器不会为您提供文件。你似乎使用了一个非常旧版本的D3（一岁？）。一个看起来更像你在下一个片段中看到的版本可能不会抛出你的错误：如果你不能使用在线版本只需下载文件并将其放入同一目录。

稍微阅读D3示例并阅读文档。

使用D3.js编写简单的强制布局应用程序

1 个答案: