network-D3.js

//network
$('#network ul').each(function() {
    var depth = $(this).parents('ul').length;
    $(this).children().addClass('level-' + depth);
});

var w = $('#network').width();
var h = $('#network').height();
var r = 6;

var fill = d3.scale.category20();

var vis = d3.select("#network").append("svg:svg")
    .attr("width", w)
    .attr("height", h);

var nodes = self.nodes = d3.selectAll("#network ul li")[0],
    links = self.links = nodes.slice(1).map(function(d) {
      return {source: d, target: d.parentNode.parentNode};
    });

var force = d3.layout.force()
    .charge(-120)
    .distance(3)
    .nodes(nodes)
    .links(links)
    .size([w, h])
    .start();

var link = vis.selectAll("line.link")
    .data(links)
  .enter().append("svg:line")
    .style("stroke", "#ccc")
    .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; });

var node = vis.selectAll(".nodeg")
    .data(nodes)
  .enter().append('g')
    .attr("class", "nodeg")
    .call(force.drag);


node.append("svg:circle")
  .style("fill", function(d) {
    var color = d.getAttribute("data-color");
    if(color==null){
      var listahija = d.childNodes[2];
      if(listahija!=null){
        var itemlista = listahija.childNodes[1];
        if(itemlista!=null){
          //console.log(itemlista);
          var color = itemlista.getAttribute("data-color");
          var link = itemlista.childNodes[2];
          if(link!=null){
            //console.log(link);
            var color = link.childNodes[0].getAttribute("data-color");
          }
        }
      }
    }
    return(color);
  })
  .style("stroke", "#fff" )
  .attr("x", -8)
  .attr("y", -8)
  .attr("r", function(d){
    if( $(d).hasClass('current_page_item') == true ){
      return 8;
    }else{
      return 5;
    }
  })
  .on("click", function(d, i) { window.location = d.firstChild.getAttribute("href"); });

  node.append("text")
    .attr("x", 12)
    .attr("y", ".35em")
    .attr("class", "nodetext")
    .attr("class", function(d) {
      if($(d).hasClass('level-1')){
        return "nodewhite";
      }else{
        return "nodetext";
      }
    })
    .text(function(d) { return d.firstChild.innerText });

force.on("tick", function() {
  var w = $('#network').width();
  var h = $('#network').height();
  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(" + Math.max(r, Math.min(w - r, d.x)) + "," + Math.max(r, Math.min(h - r, d.y)) + ")" });

      // node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});