d3.js强制布局仅垂直应用 [英] d3.js Force layout only applied vertically

问题描述

我正在使用d3进行数据可视化.为您提供一些背景信息，

I'm doing a data visualisation with d3. To give you some context,

• 该图包含约400个节点(所有数据均从多个节点加载 彼此连接的json文件)
• 它们都按年份在时间轴(x轴)上映射
• y轴上的位置是完全随机的
• 节点大小各不相同

• the graph contains about 400 nodes (all data is loaded from multiple json files) that are connected to each other
• they are all mapped by year in a timeline (x axis)
• the position in the y axis is completely randomized
• the nodes have all different sizes

现在我的问题:
如何在y轴上分布节点，以免它们重叠?

Now my question:
How can I distribute the nodes in the y axis so that they don't overlap?

您可以在 GitHub存储库(正在进行中-当前在real-database分支上).

You can checkout the full sourcecode on the GitHub Repository (work in progress - currently on the real-database branch).

这是当前外观的屏幕截图:

This is a screenshot of how it currently looks:

推荐答案

基本上，在tick()函数中，将节点数组x值重置为所需的值(大概与年份成比例)，然后节点和链接将以这些x值绘制，随后的力计算也将从这些值再次开始

Basically, in the tick() function, reset the nodes array x values to what you want them to be (presumably some scale to do with year), and the node and links will be drawn at those x values, and subsequent force calculations will start again from those values too

force.on("tick", function() {

    // Adjust to what you want nodePos to be, here I'm just doing it by index
    graph.nodes.forEach (function(nodePos,i) {
        nodePos.x = i * 15;
        //nodePos.x = xscale (data[i].year); // or whatever
     })

   // then normal node/link layout

我已经用blt909分叉了这个标准的力导向示例，以显示可以完成的一种方法-> http://jsfiddle.net/vztydams/

I've forked this standard force-directed example by blt909 to show one way it could be done --> http://jsfiddle.net/vztydams/

PS如果您有很多物品并且离散x值很少，最好首先给它们留些摆动空间(即，它们包含的x范围而不是值)，然后慢慢缩小范围下降.否则，节点将相互卡住".

PS If you have a lot of items and very few discrete x values, best to give them a bit of wiggle room at first (i.e. a range in x they're contained to rather than a value), then slowly narrow that range down. Otherwise nodes will get 'stuck' behind each other.

编辑02/03/16:

Edit 02/03/16:

Alvaro，您好，graph.nodes实际上是您链接的数据，因为这些是作为数据附加到显示节点的对象.

Hi Alvaro, essentially the graph.nodes is your linked data, as these are the objects that are attached to the displayed nodes as the data.

因此，如果我设置了一个比例尺，并坚持每个数据的随机年份:

So if I set up a scale, and stick in a random year per datum:

var dom = [1994,2014];
var xscale = d3.scale.linear().domain(dom).range([20,400]);
graph.nodes.forEach (function(datum) {
    datum.year = dom[0] + Math.floor (Math.random() * (dom[1] - dom[0]));
});

...

然后我们可以像这样限制每个节点的基准x位置:

We can then restrict the x position of each node's datum like this:

graph.nodes.forEach (function(d,i) {
    //d.x = i * 15;
    d.x = xscale(d.year);
})

(就像我说的那样，如果您有很多节点并且几年，那么最好将范围限制为一个范围，然后在以后的每个刻度上缩小范围)

(As I say, if you have a lot of nodes and few years, you'd be better restricting to a range and then narrowing that range down on each subsequent tick)

http://jsfiddle.net/vztydams/2/

这篇关于d3.js强制布局仅垂直应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！