标签: force-layout

(function() {
      var width = 800;
      var height = 700;
      var padding = 10;
      var k;
      var node;

      var pixelLoc = d3.geo.mercator();
      pixelLoc.scale(2000);

      svg = d3.select('#map')
              .append('svg:svg')
              .attr('width', width)
              .attr('height', height);

      d3.json('coordinates.json', function(coordinates) {

        var coords = [];
        var xs = [];
        var ys = []
        for (alias in coordinates) {
          coords.push(coordinates[alias]);
          xs.push(coordinates[alias][0]);
          ys.push(coordinates[alias][1]);
        }

        var minX = d3.min(xs);
        var maxX = d3.max(xs);
        var xScale = d3.scale.linear().domain([minX, maxX]).range([-50, -30]);
        var minY = d3.min(ys);
        var …

Run Code Online (Sandbox Code Playgroud)

maps geo mercator d3.js force-layout

use*_*046

2014 06-03

5
推荐指数

1
解决办法

3416
查看次数

如何在force.start上停止力导向图的移动

我使用强制有向图来显示图形视图上的拓扑数据.我写了下面的代码:

var force = d3.layout.force()
        .charge(-120)
        .alpha(0)
        .linkDistance(65)
        .gravity(0.03)
        .size([width, height]);

force
      .nodes(data.nodes)
      .links(data.links)
      .start();

Run Code Online (Sandbox Code Playgroud)

当我执行代码图初始化时,我需要停止一些运动.我希望静态位置上的图形显示没有任何移动,并且所有链接大小在图形初始化时应该相同.如果我会拖动它然后它会移动.任何帮助将非常感激....!

d3.js force-layout

Mad*_*vda

2014 01-26

5
推荐指数

1
解决办法

1万
查看次数

使用D3.js强制布局时如何在圆圈上放置文字？

<!DOCTYPE html>
<html>
<meta charset="utf-8">

<style>

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

</style>
<body>
</body>
<script src="d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("data.json", function(error, graph) {
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = svg.selectAll(".node")
      .data(graph.nodes) …

Run Code Online (Sandbox Code Playgroud)

javascript d3.js force-layout

use*_*274

2014 06-10

5
推荐指数

1
解决办法

2321
查看次数

修改d3的力布局"退火"时间表

我有一个d3力布局图viz工作得非常好,但它经常被"卡住"过早.例如,节点正朝着良好的位置摇摆,如果"碰撞"它们(向它们的位置注入一点随机性start(),它们最终会到达那里.如果我减少friction,问题也会变得更糟,因为用户认为它过于狂热.

我在force.js源代码中看到提到'annealling'(ala模拟退火),而暴露alpha参数是一个关键因素.我想知道是否有人已经想出如何直接管理一般的退火计划(没有修补force.js!)？

javascript d3.js force-layout

rik*_*ikb

2014 12-17

5
推荐指数

1
解决办法

158
查看次数

节点大小与D3中的子节点数成比例

我创建了这个click-expand-collapse网络 - http://jsfiddle.net/5Lv8gkqv/

var width = 960,
    height = 500,
    root = {
 "name": "Chocolate", "tag":"class",
 "children": [
  {
   "name": "Wafer", "tag":"subclass",
   "children": [
    {
      "name": "Nestle", "tag":"company",
     "children": [
      {"name": "KitKat", "tag":"product"}
     ]
    }
   ]
  },

  {
   "name": "White", "tag":"subclass",
   "children": [
    {
      "name": "Nestle", "tag":"company",
     "children": [
      {"name": "Milkybar", "tag":"product"}
     ]
    }
   ]
  },

    {
   "name": "Caramel", "tag":"subclass",
   "children": [
    {
      "name": "Nestle", "tag":"company",
     "children": [
      {"name": "BarOne", "tag":"product"}
     ]
    }
   ]
  },    
    {
   "name": "Milk", "tag":"subclass",
   "children": …

Run Code Online (Sandbox Code Playgroud)

javascript svg d3.js force-layout

作者

2015 01-23

5
推荐指数

2
解决办法

3817
查看次数

强制定向图错误，“无法读取未定义的属性'推'”

我是编码的新手，最近开始使用d3生成力向图。使用链接导出节点时，我成功生成了一个四节点图。但是，当我显式列出节点时，我收到错误“未捕获的TypeError：无法读取未定义的属性'push'（d3.v3.min.js）”。我已经研究了对以下两个类似问题的回答，但是无法使用答案解决此问题。我试图删除尽可能多的不相关功能，谢谢。

JavaScript错误“未捕获的TypeError：无法调用未定义的方法'push'” D3.js

Uncaught TypeError：无法调用未定义的方法“ push”（d3强制布局）

强制定向图失败：

<script type="text/javascript" src="d3.v3.min.js"> </script>

<script>

var width = 900,
    height = 590;

var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)

var links = [
    {source: 'H', target: 'I'},
    {source: 'H', target: 'J'},
    {source: 'I', target: 'J'},
    {source: 'J', target: 'K'},
];

var nodes = [ 
    {name: 'H'},
    {name: 'I'},
    {name: 'J'},
    {name: 'K'},
];

var force = d3.layout.force()
    .size([width, height])
    .nodes(d3.values(nodes))
    .links(links)
    .on('tick', tick)
    .linkDistance(100)
    .gravity(.15)
    .friction(.8)
    .linkStrength(1)
    .charge(-425)
    .chargeDistance(600)
    .start();

var …

Run Code Online (Sandbox Code Playgroud)

javascript d3.js force-layout

Der*_*ith

2017 05-23

5
推荐指数

1
解决办法

3183
查看次数

D3js强制仿真具有特定目标位置

我正在尝试渲染d3js强制模拟，但我想确保我的节点不会中继虚假信息。

使用以下代码显示节点，但是由于力布局的动态特性，它偶尔会将一些节点推出其适当的x坐标位置。

 inOrder(){
  this.simulation
    .force("x", d3.forceX(d => this.xScale(d.value)))
    .force("y",  d3.forceY(this.height / 2))
    .alpha(1).restart();
},

Run Code Online (Sandbox Code Playgroud)

这是发生这种情况的一个令人震惊的例子：数字应按从左到右的顺序排列。

我尝试使用节点上的fx属性将位置锁定在适当的位置：

inOrder(){
  this.releases.forEach(x => {
    x.fx = this.xScale(x.value)
  })

  this.simulation
    .force("x", d3.forceX(d => this.xScale(d.value)))
    .force("y",  d3.forceY(this.height / 2))
    .alpha(1).restart();
},

Run Code Online (Sandbox Code Playgroud)