2

我开始学习 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>

我的问题：

  1. 我错过了什么？我还需要做什么才能让节点浮动并可以拖动？
  2. 我想要混合或圆形和矩形节点（基于节点的某些属性）。我该怎么做呢？

  3. 当我运行应用程序时，我在 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 ”

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

4

1 回答 1

4

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

  1. 强制布局具有这种特殊性，它首先在屏幕上部显示所有节点。由于您的节点之间没有链接（如果它们有我在您的代码中看不到它），它们被绘制在彼此之上是正常的。您可以尝试通过将节点的 X 和 Y 属性设置为屏幕上的随机位置来修复此初始渲染。至于浮动问题：我不是 100% 确定这会起作用，因为我还没有测试过，但你可以尝试对节点施加不同的力，或者至少在显示窗口的角落。这将确保它们移动并且不会超出屏幕（或使用窗口的边界框）。如果你想确保节点总是移动，你还需要检查一些与速度和布局稳定性相关的力属性，不只是漂浮一段时间并保持在固定位置。让节点可拖动调用force.drag如 http://bl.ocks.org/1095795

  2. 这个例子展示了如何在力布局中呈现不同形状的节点：http: //bl.ocks.org/1062383。

  3. 我建议使用 D3 的单文件版本，它通常有一个名为 d3v2 或类似文件的文件...由于网络问题或 CORS 问题或类似问题，您可能无法访问这些文件，这意味着浏览器不会为您提供文件。您似乎使用的是非常旧的 D3 版本（一岁？）。看起来更像您在下一个片段中看到的版本可能不会向您抛出该错误：如果您不能使用在线版本，只需下载文件并将其放在同一目录中。

稍微玩一下 D3 示例并阅读文档。

于 2012-05-21T17:33:54.227 回答