plunkerでd3 その10

概要

plunkerでd3やってみた。
練習問題、やってみた。

練習問題

v5でforceSimulationを表示せよ。

写真

サンプルコード

var src = document.getElementById('node');
var src2 = document.getElementById('link');
var blob = new Blob([src.value], {
    type: "text/csv"
});
var url = URL.createObjectURL(blob);
function process_network(nodesData, linksData) {
  var link = d3.select("svg").selectAll("line").data(linksData).enter().append("line").attr("stroke-width", 1).attr("stroke", "black");
  var node = d3.select("svg").selectAll("g").data(nodesData).enter().append("g").call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended));
  node.append("circle").attr("r", 10).attr("stroke", "black").attr("stroke-width", 1.5).attr("fill", "peachpuff");
  node.append("text").attr("text-anchor", "middle").attr("dominant-baseline", "middle").style("fill", "gray").text(function(d) {
    return d.id;
  }).append("title").text(function(d) {
    return d.id;
  });
  var simulation = d3.forceSimulation(nodesData).velocityDecay(0.3).alpha(0.7).force("link", d3.forceLink().distance(130))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(200, 200));
  simulation.nodes(nodesData).on("tick", ticked);
  simulation.force("link").links(linksData);
  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.select("circle").attr("cx", function(d) {
      return d.x;
    }).attr("cy", function(d) {
      return d.y;
    });
    node.select("text").attr("dx", function(d) {
      return d.x;
    }).attr("dy", function(d) {
      return d.y + 40;
    });
  }
  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;
  }
}
d3.csv(url).then(function(data) {
  var node = [];
  var link = [];
  for (var i = 0; i < data.length; i++)
  {
    node.push({
      id: data[i]['tosi'] + data[i]['tiku']
    });
  }
  var data2 = src2.value.split("\n");
  for (var i = 0; i < data.length; i++)
  {
    var o = data2[i].split(",");
    link.push({
      source: o[1], 
      target: o[0]
    });
  }
  process_network(node, link);
});

成果物

以上。