我应该如何格式化我的JSON并解释一些基本的d3图节点链接？
我希望使用d3.js将来自这个JSON的数据表示为节点链接。我是JavaScript和D3.js的新手。我有3种类型的数据，我想在这3种类型的数据之间建立一个层次结构。父母>源>孩子，我要把每一个父母定位在源之上，把每一个父母链接到源上，而每一个孩子要在源之下，把他们链接到源上：
var width = 960,
height = 500;
// i don't really understand what this does
// except the .linkDistance - gives the dimension of the link
var force = d3.layout.force()
.size([width, height])
.charge(-400)
.linkDistance(40)
.on("tick", tick);
// Drag the nodes
var drag = force.drag()
.on("dragstart", dragstart);
//Appends the svg - the place where i draw all my items
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// Select all the links and nodes , from an array ? i don't really get it
var link = svg.selectAll(".link"),
node = svg.selectAll(".node");
// The function where i take the data from the JSON
d3.json("graph.json", function(error, graph) {
if (error) throw error;
force
.nodes(graph.nodes)
.links(graph.links)
.start();
link = link.data(graph.links)
.enter().append("line")
.attr("class", "link");
node = node.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 12)
.on("dblclick", dblclick)
.call(drag);
});
// Here is the function where i should asign the position of the nodes and the links
// This is the most problematic and i really don't understand it
function tick(){}
// The function to fix and to clear the fix from a node
function dblclick(d) {
d3.select(this).classed("fixed", d.fixed = false);
}
function dragstart(d) {
d3.select(this).classed("fixed", d.fixed = true);
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>D3 Test</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="script.js"></script>
</head>
</body>
.link {
stroke: #777;
stroke-width: 2px;
}
.nodes circle{
cursor: move;
fill: #ccc;
stroke: #000;
stroke-width: 1.5px;
}
.node.fixed {
fill: #f00;
}
{
"nodes":[
{
"id": "Source" , "group" :0
},
{
"id":"Parent_1" , "group" : 1
},
{
"id": "Parent_2" , "group" :1
},
{
"id": "Parent_3" , "group" :1
},
{
"id":"Child_1" , "group":2
},
{
"id":"Child_2" , "group":2
},
{
"id":"Child_3" , "group":2}
],
"links":[
{
"source":"Source","target":"Parent_1"
},
{
"source":"Source","target":"Parent_2"
},
{
"source":"Source","target":"Parent_3"
},
{
"source":"Source","target":"Child_1"
},
{
"source":"Source","target":"Child_2"
},
{
"source":"Source","target":"Child_3"
},
]
}
如果有人有时间和心情向我解释如何格式化我的JSON，以便我能够更有效地使用它，并向我解释如何逐步使用d3创建节点链接图，或者给我一个演示并解释每一段代码，我将非常感激。如果我问问题的方式有问题，或者有什么不清楚的地方，请说，这样我就可以编辑它。谢谢！
共有1个答案
好的，简而言之，force把所有的节点都放在一个svg上，并给它们很多属性，有些链接到数据，有些链接到force图的行为。
通常，节点会相互排斥，但是这种行为可以通过设置d3.forcemAnnyo的强度来改变。
链接将在节点之间创建一个力，该力可用于将节点绘制在一起，或将它们保持在一定的距离之外。
var position = d3.forceSimulation(graph.nodes).force("charge", d3.forceManyBody()).force("x", d3.forceCenter(width / 2, height/ 2)).force("collide", d3.forceCollide(15 * R));
nodes.each(function(d) {
if (d.group == 0) {
d.fx = wid / 2;//fix X value
d.fy = wid / 2//fix Y value
}
});
-
我有一个任务要处理文件https://github.com/mledoze/countries/blob/master/countries.json，这个文件相当大。首先，我用下载了它，并尝试使用0元素： 然而，整个json文件被识别为“str”，而作为0元素，我收到的只是“[”，我该如何修复这个问题呢？
-
问题内容： 在遵循众多D3示例时，数据通常以flare.json中给出的格式进行格式化： 我有一个邻接列表，如下所示： 我想将其转换为以上格式。目前，我正在服务器端执行此操作，但是有没有办法使用d3的功能来实现此目的？我在这里找到了一个，但是这种方法似乎需要修改d3核心库，由于可维护性，我不赞成这样做。有什么建议？ 问题答案： 有没有规定的格式，通常可以通过各种访问函数重新定义你的数据（如hier
-
我有一个邻接列表如下： 我想把它转换成上面的格式。目前，我正在服务器端做这件事，但是有没有一种方法可以使用D3的功能来实现这一点呢？我在这里找到了一个，但该方法似乎需要修改d3核心库，由于可维护性，我不赞成。有什么建议吗？
-
当我尝试编译这段代码时，Eclipse会出现以下两个错误： > 用于函数：maxmin的非法修饰符；只允许最终 对于：Mn不能解析为变量 为什么会出现这两个错误？ 我想这可能已经回答了这个问题，但我不明白其中使用的术语。 这是我的代码：
-
问题内容： 我想了解如何使用dis（Python字节码的反汇编程序）。具体来说，应该如何解释（或）的输出？ 。 这是一个非常具体的示例（在Python 2.7.3中）： 我看到等是字节码指令 （尽管有趣的是，它没有出现在此列表中，尽管我希望它可以作为）。我认为右侧的数字是内存分配，而左侧的数字是goto数字…我注意到它们每次 几乎 增加3（但不是完全一样）。 如果我包装一个函数： 问题答案： 您正
-
我们是新的Kafka，所以我正在寻找一些高水平的指导。我们有一个实体（我们可以称之为“订单”）的数据，该实体本质上是许多不同的实体（我们可以将一个称为“小部件”，一个称为“小玩意”，但大约有20种不同的实体类型）。 显然，将订单作为一个单一的主题来思考是有好处的，因为所有的部分都与一个订单相关。但在设计上，将这些主题分开（订单、小部件、小发明等）是否更有意义？ 小部件和小玩意之间没有直接的关联--