owendall · April 21, 2017 17:59 · Apr 21, 2017 · Feb 9, 2016 · Oct 31, 2015 · Jun 11, 2015
diff --git a/.block → Sticky Force Layout b/.block → Sticky Force Layout
diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: gpl-3.0
diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
 
 </style>
 <body>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+<script src="//d3js.org/d3.v3.min.js"></script>
 <script>
 
 var width = 960,

diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
 
 </style>
 <body>
-<script src="http://d3js.org/d3.v3.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
 <script>
 
 var width = 960,
@@ -43,6 +43,8 @@
     node = svg.selectAll(".node");
 
 d3.json("graph.json", function(error, graph) {
+  if (error) throw error;
+
   force
       .nodes(graph.nodes)
       .links(graph.links)

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-This example demonstrates how to prevent D3’s [force layout](https://github.com/mbostock/d3/wiki/Force-Layout) from moving nodes that have been repositioned by the user. When the force layout’s [drag behavior](https://github.com/mbostock/d3/wiki/Drag-Behavior) dispatches a _dragstart_ event, the _fixed_ property of the dragged node is set to true. This prevents the force layout from subsequently changing the position of the node (due to forces).
+This example demonstrates how to prevent D3’s [force layout](https://github.com/mbostock/d3/wiki/Force-Layout) from moving nodes that have been repositioned by the user. When the force layout’s [drag behavior](https://github.com/mbostock/d3/wiki/Drag-Behavior) dispatches a _dragstart_ event, the _fixed_ property of the dragged node is set to true. This prevents the force layout from subsequently changing the position of the node (due to forces). Double-click to release a node.
 
 Internally, the force layout uses three bits to control whether a node is fixed. The first bit can be set externally, as in this example. The second and third bits are set on mouseover and mousedown, respectively, so that nodes are fixed temporarily during dragging. Although the second and third bits are automatically cleared when dragging ends, the first bit stays true in this example, and thus nodes remain fixed after dragging.
 

diff --git a/index.html b/index.html
@@ -56,6 +56,7 @@
     .enter().append("circle")
       .attr("class", "node")
       .attr("r", 12)
+      .on("dblclick", dblclick)
       .call(drag);
 });
 
@@ -69,9 +70,12 @@
       .attr("cy", function(d) { return d.y; });
 }
 
+function dblclick(d) {
+  d3.select(this).classed("fixed", d.fixed = false);
+}
+
 function dragstart(d) {
-  d.fixed = true;
-  d3.select(this).classed("fixed", true);
+  d3.select(this).classed("fixed", d.fixed = true);
 }
 
 </script>
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-This example demonstrates how to prevent D3’s [force layout](https://github.com/mbostock/d3/wiki/Force-Layout) from moving nodes that have been repositioned by the user. When the force layout’s [drag behavior](https://github.com/mbostock/d3/wiki/Drag-Behavior) dispatches a _dragstart_ event, the `fixed` property of the dragged node is set to true. This prevents the force layout from subsequently changing the position of the node (due to forces).
+This example demonstrates how to prevent D3’s [force layout](https://github.com/mbostock/d3/wiki/Force-Layout) from moving nodes that have been repositioned by the user. When the force layout’s [drag behavior](https://github.com/mbostock/d3/wiki/Drag-Behavior) dispatches a _dragstart_ event, the _fixed_ property of the dragged node is set to true. This prevents the force layout from subsequently changing the position of the node (due to forces).
 
 Internally, the force layout uses three bits to control whether a node is fixed. The first bit can be set externally, as in this example. The second and third bits are set on mouseover and mousedown, respectively, so that nodes are fixed temporarily during dragging. Although the second and third bits are automatically cleared when dragging ends, the first bit stays true in this example, and thus nodes remain fixed after dragging.
 

diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
 This example demonstrates how to prevent D3’s [force layout](https://github.com/mbostock/d3/wiki/Force-Layout) from moving nodes that have been repositioned by the user. When the force layout’s [drag behavior](https://github.com/mbostock/d3/wiki/Drag-Behavior) dispatches a _dragstart_ event, the `fixed` property of the dragged node is set to true. This prevents the force layout from subsequently changing the position of the node (due to forces).
 
 Internally, the force layout uses three bits to control whether a node is fixed. The first bit can be set externally, as in this example. The second and third bits are set on mouseover and mousedown, respectively, so that nodes are fixed temporarily during dragging. Although the second and third bits are automatically cleared when dragging ends, the first bit stays true in this example, and thus nodes remain fixed after dragging.
+
+Also note that the force layout [resumes](https://github.com/mbostock/d3/wiki/Force-Layout#wiki-resume) automatically on _dragmove_. This ensures that other nodes in the graph respond naturally to the dragged node’s movement.
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
-This example demonstrates how to prevent the force layout from moving nodes that have been dragged by the user. When the force layout’s drag behavior dispatches a _dragstart_ event, the `fixed` property of the dragged node is set to true. This prevents the force layout from subsequently changing the position of the node (due to forces).
+This example demonstrates how to prevent D3’s [force layout](https://github.com/mbostock/d3/wiki/Force-Layout) from moving nodes that have been repositioned by the user. When the force layout’s [drag behavior](https://github.com/mbostock/d3/wiki/Drag-Behavior) dispatches a _dragstart_ event, the `fixed` property of the dragged node is set to true. This prevents the force layout from subsequently changing the position of the node (due to forces).
 
 Internally, the force layout uses three bits to control whether a node is fixed. The first bit can be set externally, as in this example. The second and third bits are set on mouseover and mousedown, respectively, so that nodes are fixed temporarily during dragging. Although the second and third bits are automatically cleared when dragging ends, the first bit stays true in this example, and thus nodes remain fixed after dragging.
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+This example demonstrates how to prevent the force layout from moving nodes that have been dragged by the user. When the force layout’s drag behavior dispatches a _dragstart_ event, the `fixed` property of the dragged node is set to true. This prevents the force layout from subsequently changing the position of the node (due to forces).
+
+Internally, the force layout uses three bits to control whether a node is fixed. The first bit can be set externally, as in this example. The second and third bits are set on mouseover and mousedown, respectively, so that nodes are fixed temporarily during dragging. Although the second and third bits are automatically cleared when dragging ends, the first bit stays true in this example, and thus nodes remain fixed after dragging.
diff --git a/graph.json b/graph.json
@@ -0,0 +1,37 @@
+{
+  "nodes": [
+    {"x": 469, "y": 410},
+    {"x": 493, "y": 364},
+    {"x": 442, "y": 365},
+    {"x": 467, "y": 314},
+    {"x": 477, "y": 248},
+    {"x": 425, "y": 207},
+    {"x": 402, "y": 155},
+    {"x": 369, "y": 196},
+    {"x": 350, "y": 148},
+    {"x": 539, "y": 222},
+    {"x": 594, "y": 235},
+    {"x": 582, "y": 185},
+    {"x": 633, "y": 200}
+  ],
+  "links": [
+    {"source":  0, "target":  1},
+    {"source":  1, "target":  2},
+    {"source":  2, "target":  0},
+    {"source":  1, "target":  3},
+    {"source":  3, "target":  2},
+    {"source":  3, "target":  4},
+    {"source":  4, "target":  5},
+    {"source":  5, "target":  6},
+    {"source":  5, "target":  7},
+    {"source":  6, "target":  7},
+    {"source":  6, "target":  8},
+    {"source":  7, "target":  8},
+    {"source":  9, "target":  4},
+    {"source":  9, "target": 11},
+    {"source":  9, "target": 10},
+    {"source": 10, "target": 11},
+    {"source": 11, "target": 12},
+    {"source": 12, "target": 10}
+  ]
+}
diff --git a/index.html b/index.html
@@ -37,7 +37,7 @@
 
 var svg = d3.select("body").append("svg")
     .attr("width", width)
-    .attr("weight", height);
+    .attr("height", height);
 
 var link = svg.selectAll(".link"),
     node = svg.selectAll(".node");

diff --git a/thumbnail.png b/thumbnail.png
diff --git a/index.html b/index.html
@@ -4,75 +4,60 @@
 
 .link {
   stroke: #000;
+  stroke-width: 1.5px;
 }
 
 .node {
+  cursor: move;
   fill: #ccc;
   stroke: #000;
+  stroke-width: 1.5px;
 }
 
-.node.sticky {
+.node.fixed {
   fill: #f00;
 }
 
 </style>
 <body>
-<script src="http://d3js.org/d3.v2.min.js?2.10.1"></script>
+<script src="http://d3js.org/d3.v3.min.js"></script>
 <script>
 
-var graph = {
-  nodes: d3.range(13).map(Object),
-  links: [
-    {source:  0, target:  1},
-    {source:  1, target:  2},
-    {source:  2, target:  0},
-    {source:  1, target:  3},
-    {source:  3, target:  2},
-    {source:  3, target:  4},
-    {source:  4, target:  5},
-    {source:  5, target:  6},
-    {source:  5, target:  7},
-    {source:  6, target:  7},
-    {source:  6, target:  8},
-    {source:  7, target:  8},
-    {source:  9, target:  4},
-    {source:  9, target: 11},
-    {source:  9, target: 10},
-    {source: 10, target: 11},
-    {source: 11, target: 12},
-    {source: 12, target: 10}
-  ]
-};
-
 var width = 960,
     height = 500;
 
+var force = d3.layout.force()
+    .size([width, height])
+    .charge(-400)
+    .linkDistance(40)
+    .on("tick", tick);
+
+var drag = force.drag()
+    .on("dragstart", dragstart);
+
 var svg = d3.select("body").append("svg")
     .attr("width", width)
     .attr("weight", height);
 
-var force = d3.layout.force()
-    .nodes(graph.nodes)
-    .links(graph.links)
-    .size([width, height])
-    .on("tick", tick)
-    .start();
-
-var link = svg.selectAll(".link")
-   .data(graph.links)
- .enter().append("line")
-   .attr("class", "link");
-
-var node = svg.selectAll(".node")
-   .data(graph.nodes)
- .enter().append("circle")
-   .attr("class", "node")
-   .attr("r", 4.5)
-   .call(force.drag)
-   .on("mousedown", function(d) {
-     d.fixed = true;
-     d3.select(this).classed("sticky", true);
-   });
+var link = svg.selectAll(".link"),
+    node = svg.selectAll(".node");
+
+d3.json("graph.json", function(error, graph) {
+  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)
+      .call(drag);
+});
 
 function tick() {
   link.attr("x1", function(d) { return d.source.x; })
@@ -84,4 +69,9 @@
       .attr("cy", function(d) { return d.y; });
 }
 
+function dragstart(d) {
+  d.fixed = true;
+  d3.select(this).classed("fixed", true);
+}
+
 </script>
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/index.html b/index.html
@@ -11,6 +11,10 @@
   stroke: #000;
 }
 
+.node.sticky {
+  fill: #f00;
+}
+
 </style>
 <body>
 <script src="http://d3js.org/d3.v2.min.js?2.10.1"></script>
@@ -51,7 +55,6 @@
     .nodes(graph.nodes)
     .links(graph.links)
     .size([width, height])
-    .charge(-200)
     .on("tick", tick)
     .start();
 
@@ -66,7 +69,10 @@
    .attr("class", "node")
    .attr("r", 4.5)
    .call(force.drag)
-   .on("mousedown", function(d) { d.fixed = true; });
+   .on("mousedown", function(d) {
+     d.fixed = true;
+     d3.select(this).classed("sticky", true);
+   });
 
 function tick() {
   link.attr("x1", function(d) { return d.source.x; })

diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
 
 </style>
 <body>
-<script src="http://d3js.org/d3.v2.min.js?2.10.0"></script>
+<script src="http://d3js.org/d3.v2.min.js?2.10.1"></script>
 <script>
 
 var graph = {
@@ -64,7 +64,9 @@
    .data(graph.nodes)
  .enter().append("circle")
    .attr("class", "node")
-   .attr("r", 4.5);
+   .attr("r", 4.5)
+   .call(force.drag)
+   .on("mousedown", function(d) { d.fixed = true; });
 
 function tick() {
   link.attr("x1", function(d) { return d.source.x; })

diff --git a/index.html b/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+.link {
+  stroke: #000;
+}
+
+.node {
+  fill: #ccc;
+  stroke: #000;
+}
+
+</style>
+<body>
+<script src="http://d3js.org/d3.v2.min.js?2.10.0"></script>
+<script>
+
+var graph = {
+  nodes: d3.range(13).map(Object),
+  links: [
+    {source:  0, target:  1},
+    {source:  1, target:  2},
+    {source:  2, target:  0},
+    {source:  1, target:  3},
+    {source:  3, target:  2},
+    {source:  3, target:  4},
+    {source:  4, target:  5},
+    {source:  5, target:  6},
+    {source:  5, target:  7},
+    {source:  6, target:  7},
+    {source:  6, target:  8},
+    {source:  7, target:  8},
+    {source:  9, target:  4},
+    {source:  9, target: 11},
+    {source:  9, target: 10},
+    {source: 10, target: 11},
+    {source: 11, target: 12},
+    {source: 12, target: 10}
+  ]
+};
+
+var width = 960,
+    height = 500;
+
+var svg = d3.select("body").append("svg")
+    .attr("width", width)
+    .attr("weight", height);
+
+var force = d3.layout.force()
+    .nodes(graph.nodes)
+    .links(graph.links)
+    .size([width, height])
+    .charge(-200)
+    .on("tick", tick)
+    .start();
+
+var link = svg.selectAll(".link")
+   .data(graph.links)
+ .enter().append("line")
+   .attr("class", "link");
+
+var node = svg.selectAll(".node")
+   .data(graph.nodes)
+ .enter().append("circle")
+   .attr("class", "node")
+   .attr("r", 4.5);
+
+function tick() {
+  link.attr("x1", function(d) { return d.source.x; })
+      .attr("y1", function(d) { return d.source.y; })
+      .attr("x2", function(d) { return d.target.x; })
+      .attr("y2", function(d) { return d.target.y; });
+
+  node.attr("cx", function(d) { return d.x; })
+      .attr("cy", function(d) { return d.y; });
+}
+
+</script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		This example demonstrates how to prevent the force layout from moving nodes that have been dragged by the user. When the force layout’s drag behavior dispatches a _dragstart_ event, the `fixed` property of the dragged node is set to true. This prevents the force layout from subsequently changing the position of the node (due to forces).

		Internally, the force layout uses three bits to control whether a node is fixed. The first bit can be set externally, as in this example. The second and third bits are set on mouseover and mousedown, respectively, so that nodes are fixed temporarily during dragging. Although the second and third bits are automatically cleared when dragging ends, the first bit stays true in this example, and thus nodes remain fixed after dragging.
No results found