vvvw/static/js/d3_map.js

var width = 960,
    height = 500

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

var force = d3.layout.force()
    .gravity(0.05)
    .distance(200)
    .charge(-100)
    .size([width, height]);

d3.json("/static/js/group1.json", function(error, json) {
  if (error) throw error;

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

  var link = svg.selectAll(".link")
      .data(json.links)
    .enter().append("line")
      .attr("class", "link");

  var node = svg.selectAll(".node")
      .data(json.nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("id", function(d){return d.id})
      // .on("click", function(d){
      //         scrolldiv(d);
      //         play(d);
      //         popup(d);
      //     })
      .call(force.drag);

  node.append("image")
      .attr("xlink:href", "/static/images/circle.png")
      .attr("x", -8)
      .attr("y", -8)
      .attr("width", 16)
      .attr("height", 16);

  node.append("text")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.name });

  force.on("tick", function() {
    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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  });

// scripts for mouse events
// popup
  // function popup() {
    $("#dadaloglu").click(function(){
      $("#showdadaloglu").fadeIn()
      console.log("around")
      var dada = document.getElementById("textdadaloglu");
      dada.scrollIntoView();
      var audio1 = document.getElementById("audio-1");
      audio1.currentTime = 12;
      // audio1.play();
    });


    $("#muharrem").click(function(){$("#showmuharrem").fadeIn()
    console.log("around")
    var muh = document.getElementById("textmuharrem");
    muh.scrollIntoView();
    var audio2 = document.getElementById("audio-1");
    audio2.currentTime = 50;
    // audio2.play();
    });
  // };

  $(document).click(function (e) {
    if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
        $("#showdadaloglu").fadeOut();
        $("#audiodadaloglu").trigger('pause');

      };
    if (!$(e.target).parents().andSelf().is('#muharrem')) {
      $("#showmuharrem").fadeOut();
        $("audiomuharrem").trigger('pause');
    };
  });

// scroll
// $("#dadaloglu").click(function(){
//     var elem = document.getElementById("ele");
//     elem.scrollIntoView();
//   });







});