first (and maybe last) commit

capan · Aug 8, 2018 · 6b9d8c5 · 6b9d8c5
commit 6b9d8c5
Show file tree

Hide file tree

Showing 4 changed files with 26,494 additions and 0 deletions.
diff --git a/f_force.js b/f_force.js
@@ -0,0 +1,69 @@
+var svg = d3.select("svg"),
+  width = +svg.attr("width"),
+  height = +svg.attr("height");
+
+var color = d3.scaleOrdinal(d3.schemeCategory20);
+
+var simulation = d3.forceSimulation()
+  .force("link", d3.forceLink())
+  .force("charge", d3.forceManyBody())
+  .force("center", d3.forceCenter(width / 2, height / 2));
+
+var link = svg.append("g")
+  .attr("class", "links")
+  .selectAll("line")
+  .data(graph.links)
+  .enter().append("line")
+  .attr("stroke", "black")
+  .attr("stroke-width", 1);
+
+var node = svg.append("g")
+  .attr("class", "nodes")
+  .selectAll("circle")
+  .data(graph.nodes)
+  .enter().append("circle")
+  .attr("r", 3)
+  .attr("fill", function (d,i) { return color(i); })
+  .call(d3.drag()
+    .on("start", dragstarted)
+    .on("drag", dragged)
+    .on("end", dragended));
+
+node.append("title")
+  .text(function (d) { return d.name; });
+
+simulation
+  .nodes(graph.nodes)
+  .on("tick", ticked);
+
+simulation.force("link")
+  .links(graph.links);
+
+function ticked() {
+  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; });
+}
+
+function dragstarted(d) {
+  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
+  d.fx = d.x;
+  d.fy = d.y;
+}
+
+function dragged(d) {
+  d.fx = d3.event.x;
+  d.fy = d3.event.y;
+}
+
+function dragended(d) {
+  if (!d3.event.active) simulation.alphaTarget(0);
+  d.fx = null;
+  d.fy = null;
+}
diff --git a/fb_index.html b/fb_index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="tr">
+
+<head>
+  <title>The d3 test</title>
+  <style>
+    .chart {
+      background-color: aliceblue;
+    }
+
+    .main text {
+      font: 10px sans-serif;
+    }
+
+    .axis line,
+    .axis path {
+      shape-rendering: crispEdges;
+      stroke: black;
+      fill: none;
+    }
+
+    circle {
+      fill: red;
+      /* shape-rendering: crispEdges; */
+    }
+  </style>
+
+  <script src="https://d3js.org/d3.v4.min.js"></script>
+</head>
+
+<body>
+    <svg width="1800" height="1000"></svg>
+  <div class='content'>
+    <!-- /the chart goes here -->
+  </div>
+  <script>
+  </script>
+  <script src="gra.js"></script>
+  <script type="text/javascript" src="f_force.js"></script>
+</body>
+
+</html>