标签: force-layout

这是一篇关于在R中创建beeswarm情节的文章.

还有R包为beeswarm情节.接下来的两张图片说明了该软件包提供的一些可能性:

但是,我现在正试图使用d3.js的强制定向布局.

我的计划是让自定义重力将点拉向垂直线及其正确的y值,并且碰撞检测使点彼此保持不变.

我有一个半工作原型:

不幸的是,我无法找到解决两个问题的方法 - 我怀疑它们确实是同一个问题:

1. 我的观点不断重叠,至少有点重叠.

2. 在布局中心堆积积分之后,正在进行"洗牌",因为防撞力量和"来到中心"部队的战斗.

我希望这些要点可以很快就他们应该居住的地方达成协议,最终不会重叠.

我正在使用的强制代码(如果你想在这里看到它而不是bl.ocks.org):

force.on("tick", function(e) {
  var q,
    node,
    i = 0,
    n = nodes.length;

  var q = d3.geom.quadtree(nodes);

  while (++i < n) {
    node = nodes[i];
    q.visit(collide(node));
    xerr = node.x - node.true_x;
    yerr = node.y - node.true_y;
    node.x -= xerr*0.005;
    node.y -= yerr*0.9;
  }

  svg.selectAll("circle")
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
});

function collide(node) …

我正在将节点添加到力布局图中,如下所示:

var node = vis.selectAll("circle.node")
    .data(nodes)
    .enter()
    .append("circle")
    .attr("class", "node")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 5)
    .style("fill", function(d) { return fill(d.group); })
    .call(force.drag);

有没有办法将复合SVG元素添加为节点？即我想为每个圆圈添加一个超链接,所以我需要这样的东西:

<a href="whatever.com"><circle ...></circle></a>

我在D3强制定向布局中设置了节点.fixed = true.如果我设置.x或.y值,节点本身不会移动到新位置.

这是我的功能:

function fixNode(idArray, locationX, locationY) {
    for ( x = 0; x < idArray.length; x++ ) {
        for ( y = 0; y < nodes.length; y++ ) {
            if (nodes[y].id == idArray[x]) {
                nodes[y].fixed = true;
                nodes[y].x = 50;
                nodes[y].y = 50;
                break;
            }
        }
    }
}

更新1:

这是基于杰森建议的工作函数:

function fixNode(idArray, locationX, locationY) {
    for ( x = 0; x < idArray.length; x++ ) {
        for ( y = 0; y < nodes.length; y++ ) { …

我正在尝试用D3库设计一个物理引力模拟,但我没有太多运气.在"布局" API参考状态,身体重心可通过积极的"一把手"参数来实现的,但我不确定这是如何工作的.

我现在试图实现的是一个SVG元素,它包含多个可变加权和大小的rects,它们以不同的速度上升,最终走出视口 - 它们的权重将定义它们上升的速度.(基本上,我只是试图从视口顶部实现全局引力.)

是否有可行的方法按照D3力布局执行此操作？我只是在寻找概念解决方案,但也很感谢示例和代码片段.

提前致谢!

我想用d3在一个分组的力导向图构建周围画一个船体.

我用圆圈构建了图表.但我现在想要加入圆圈与路径(船体)的交叉点.如果没有加入交叉路口,那么围绕这组圆圈绘制船体就足够了.我尝试了使用Convex Hull示例的Force-Directed Layout.但我有文字和圆圈覆盖文本和连接文本的链接.

var vertices = new Array();
var width = 960,
    height = 500;
var color = d3.scale.category10();
var r = 6;
var force = d3.layout.force().size([width, height]);
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height).attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
$(function() {

    var json = "{\"nodes\":[{\"name\":\"language\",\"group\":1,\"fontsize\":\"45px\",\"title\":null},{\"name\":\"english\",\"group\":1,\"fontsize\":\"35px\",\"title\":null},{\"name\":\"languages\",\"group\":1,\"fontsize\":\"21px\",\"title\":null},{\"name\":\"speak\",\"group\":1,\"fontsize\":\"16px\",\"title\":null},{\"name\":\"religion\",\"group\":1,\"fontsize\":\"16px\",\"title\":null},{\"name\":\"words\",\"group\":1,\"fontsize\":\"16px\",\"title\":null},{\"name\":\"living\",\"group\":1,\"fontsize\":\"16px\",\"title\":null},{\"name\":\"adobe\",\"group\":2,\"fontsize\":\"15px\",\"title\":null},{\"name\":\"malayalam\",\"group\":1,\"fontsize\":\"15px\",\"title\":null},{\"name\":\"learn\",\"group\":1,\"fontsize\":\"15px\",\"title\":null},{\"name\":\"multilanguage\",\"group\":3,\"fontsize\":\"15px\",\"title\":null},{\"name\":\"different\",\"group\":1,\"fontsize\":\"15px\",\"title\":null},{\"name\":\"sarcasm\",\"group\":1,\"fontsize\":\"15px\",\"title\":null},{\"name\":\"linkedin\",\"group\":4,\"fontsize\":\"15px\",\"title\":null},{\"name\":\"hindi\",\"group\":1,\"fontsize\":\"15px\",\"title\":null},{\"name\":\"indesign\",\"group\":5,\"fontsize\":\"15px\",\"title\":null},{\"name\":\"city\",\"group\":1,\"fontsize\":\"15px\",\"title\":null},{\"name\":\"spanish\",\"group\":1,\"fontsize\":\"15px\",\"title\":null},{\"name\":\"religious\",\"group\":1,\"fontsize\":\"15px\",\"title\":null},{\"name\":\"real\",\"group\":1,\"fontsize\":\"15px\",\"title\":null}],\"links\":[{\"source\":0,\"target\":1,\"value\":1},{\"source\":0,\"target\":2,\"value\":1},{\"source\":0,\"target\":3,\"value\":1},{\"source\":0,\"target\":4,\"value\":1},{\"source\":0,\"target\":5,\"value\":1},{\"source\":1,\"target\":2,\"value\":1},{\"source\":1,\"target\":3,\"value\":1},{\"source\":1,\"target\":5,\"value\":1},{\"source\":1,\"target\":6,\"value\":1},{\"source\":2,\"target\":3,\"value\":1},{\"source\":2,\"target\":4,\"value\":1},{\"source\":2,\"target\":5,\"value\":1},{\"source\":3,\"target\":5,\"value\":1},{\"source\":3,\"target\":8,\"value\":1},{\"source\":4,\"target\":5,\"value\":1},{\"source\":4,\"target\":6,\"value\":1},{\"source\":4,\"target\":11,\"value\":1},{\"source\":5,\"target\":6,\"value\":1},{\"source\":6,\"target\":2,\"value\":1},{\"source\":6,\"target\":11,\"value\":1},{\"source\":6,\"target\":18,\"value\":1},{\"source\":8,\"target\":0,\"value\":1},{\"source\":8,\"target\":2,\"value\":1},{\"source\":8,\"target\":14,\"value\":1},{\"source\":9,\"target\":0,\"value\":1},{\"source\":9,\"target\":1,\"value\":1},{\"source\":9,\"target\":2,\"value\":1},{\"source\":9,\"target\":3,\"value\":1},{\"source\":9,\"target\":8,\"value\":1},{\"source\":11,\"target\":0,\"value\":1},{\"source\":11,\"target\":1,\"value\":1},{\"source\":11,\"target\":2,\"value\":1},{\"source\":11,\"target\":3,\"value\":1},{\"source\":12,\"target\":0,\"value\":1},{\"source\":12,\"target\":1,\"value\":1},{\"source\":12,\"target\":2,\"value\":1},{\"source\":12,\"target\":3,\"value\":1},{\"source\":12,\"target\":14,\"value\":1},{\"source\":14,\"target\":0,\"value\":1},{\"source\":14,\"target\":1,\"value\":1},{\"source\":14,\"target\":2,\"value\":1},{\"source\":14,\"target\":3,\"value\":1},{\"source\":14,\"target\":5,\"value\":1},{\"source\":16,\"target\":0,\"value\":1},{\"source\":16,\"target\":1,\"value\":1},{\"source\":16,\"target\":2,\"value\":1},{\"source\":16,\"target\":9,\"value\":1},{\"source\":16,\"target\":11,\"value\":1},{\"source\":17,\"target\":0,\"value\":1},{\"source\":17,\"target\":1,\"value\":1},{\"source\":17,\"target\":2,\"value\":1},{\"source\":17,\"target\":3,\"value\":1},{\"source\":18,\"target\":2,\"value\":1},{\"source\":18,\"target\":4,\"value\":1},{\"source\":18,\"target\":5,\"value\":1},{\"source\":18,\"target\":11,\"value\":1},{\"source\":19,\"target\":0,\"value\":1},{\"source\":19,\"target\":1,\"value\":1},{\"source\":19,\"target\":2,\"value\":1},{\"source\":19,\"target\":3,\"value\":1},{\"source\":19,\"target\":5,\"value\":1}]}";

    json = htmlDecode(json);

    json = $.parseJSON(json);

    svg.append("svg:rect").attr("width", width).attr("height", height).style("stroke", "#fff").style("fill", "#fff");

    force.nodes(json.nodes).links(json.links).gravity(0.05).linkDistance(120).charge(-200).start();

    var node = svg.selectAll(".node").data(json.nodes).enter().append("g").attr("class", "node");
    var link = svg.selectAll(".link").data(json.links).enter().append("line").attr("class", "link").style("stroke-opacity", …

我想用力布局做一些与众不同的事情(用于可视化图形).星座和所有星座都很有趣,但对于时间序列数据来说,它并没有那么有用.我希望能够通过某个轴约束布局,例如,根据节点在数据集中出现的时间布置节点,同时仍然保留可视化的"弹性".这可能使用d3吗？

我正在遵循像这样的d3强制布局示例.

我想控制飞向集群的点的速度.换句话说,我想要一些点需要更多时间才能到达最终位置,而一些点需要更少的时间.

我试图添加一个计时器功能来控制每个滴答的时间,但它不起作用.

this.force = d3.layout.force()
.on("tick", setTimeout(tick(d), 50));

我需要帮助.

我正在尝试实现d3力布局,无法弄清楚如何以正确的方式定位链接的标记.

这是我到目前为止所得到的:

var links = force_data.force_directed_data.links;

        var nodes = {};

        // Compute the distinct nodes from the links.
        links.forEach(function (link) {
            link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
            link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
        });

        console.log(nodes);

        var width = 1000,
            height = 1000;

        var force = d3.layout.force()
            .nodes(d3.values(nodes))
            .links(links)
            .size([width, height])
            .linkDistance(300)
            .charge(-120)
            .friction(0.9)
            .on("tick", tick)
            .start();

        var svg = d3.select("#force-graph").append("svg")
            .attr("width", width)
            .attr("height", height);

        // Per-type markers, as they don't inherit styles.
        svg.append("defs").selectAll("marker")
            .data(["dominating"])
            .enter().append("marker")
            .attr("id", …

我已经构建了一个d3带有分组节点的力导向图.我想将这些组封装在云状结构中.我怎样才能做到这一点？

Js Fiddle链接图:http://jsfiddle.net/Cfq9J/5/

我的结果应该与此图像类似:

我用d3.js插件创建了一个力导向图,我想根据它们所属的组为不同颜色的节点和标签着色.

我添加了颜色比例:

var color = d3.scale.category20();

以及我添加的节点变量:

.style("fill", function(d) { return color(d.group); })

但是所有节点都是相同的颜色..

这是我目前的情况:http://jsfiddle.net/WBkw9/

完整脚本:

var links = [
  {source: "John", target: "Mike", group: "5"},
  {source: "John", target: "Janice", group: "5"},
  {source: "John", target: "Caleb", group: "5"},
  {source: "John", target: "Anna", group: "4"},
  {source: "John", target: "Tommy", group: "3"},
  {source: "John", target: "Jack", group: "2"},
  {source: "John", target: "Vilma", group: "1"},
];

var nodes = {};

// Compute the distinct nodes from the links.
links.forEach(function(link) { …