budalastina

by slawe

HTML

<script src="http://mbostock.github.com/d3/d3.js"></script>

CSS

.link {
  stroke: #ccc;
}

.node.type1 {
  fill:brown;
}
.node.type2 {
  fill:#337147;
}
.node.type3 {
  fill:blue;
}
.node.type4 {
  fill:red;
}

JavaScript

var data = {"nodes":[{"name":"Name 1", "type":1,"value":265000},{"name":"Name 2", "type":1, "value":23000},{"name":"Name 3", "type":2,"value":115000},{"name":"Name 4", "type":2, "value":312000},{"name":"Name 5", "type":3, "img_href":"https://toppng.com/uploads/preview/linux-logo-png-linux-tux-black-white-115628885292kgc8ongco.png"},{"name":"Action 1", "type":4},{"name":"Action 2", "type":4},{"name":"Name 6", "type":3, "img_href":"https://e7.pngegg.com/pngimages/988/1003/png-clipart-tuxedo-penguin-desktop-linux-penguin-animals-logo.png"}], "links":[{"source":0,"target":2,"value":10},{"source":0,"target":3,"value":10},{"source":1,"target":2,"value":10},{"source":2,"target":4,"value":10},{"source":4,"target":7,"value":10},{"source":4,"target":5,"value":10},{"source":4,"target":6,"value":10}]}    
    
    
    
    var w = 560,
        h = 500,
        radius = d3.scale.log().domain([0, 312000]).range(["10", "50"]);

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

    var force = self.force = d3.layout.force()
        .nodes(data.nodes)
        .links(data.links)
        .distance(100)
        .charge(-1000)
        .size([w, h])
        .start();

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

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

    node.append("circle")
      .attr("class", function(d){ return "node type"+d.type})
        .attr("r", function(d) { return radius(d.value) || 10 })
      //.style("fill", function(d) { return fill(d.type); })
      .call(force.drag);

   ...