Ognami · March 13, 2017 18:08
diff --git a/data.json b/data.json
 {
  "nodes":[
 		{"name":"node1","group":1},
 		{"name":"node2","group":2},
 		{"name":"node3","group":2},
 		{"name":"node4","group":3}
 	],
 	"links":[
 		{"source":2,"target":1,"weight":1},
 		{"source":0,"target":2,"weight":3}
 	]
 }
diff --git a/index.html b/index.html
 <!doctype html>
 <meta charset="utf-8">
    <html>
    <head>
        <title>Basic Network</title>
        <style>
            body {
                font-family: "Trebuchet MS", Helvetica, sans-serif;
            }

            form { float: left; margin: 10px; }

            .field { margin: 15px 0; }

            #chart {
                border: 1px solid #ccc;
            }

            select {
                padding: 3px;
            }

            .links line {
                stroke: #999;
                stroke-opacity: 0.6;
            }

            .node circle {
                stroke: #fff;
                stroke-width: 1.5px;
            }
            .node text {
                font-size: 12px;
            }


        </style>
    </head>
    <body>

        <svg id="chart" width="500" height="500"></svg>
        
        <script src="https://d3js.org/d3.v4.min.js"></script>

        <!-- Chart related script -->
        <script>
            var svg = d3.select("svg"),
                width = +svg.attr("width"),
                height = +svg.attr("height");

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

            var node = svg.append("g")
                  .attr("class", "nodes")
                .selectAll("g.node");

            var info = svg.append("text")
                .attr("class","info")
                .attr("transform","translate(10,20)");

            var radius = "6",
                maxradius = "8";

            var color = d3.scaleOrdinal()
                .range(["#111f33", "#5e88a2", "#d7e3ea"]);

            var simulation = d3.forceSimulation()
                .force("link", d3.forceLink().id(function(d) { 
                    return d.index; }))
                .force("charge", d3.forceManyBody().distanceMax(height/2))
                .force("center", d3.forceCenter(width / 2, height / 2));

            var url = "data.json";
            getData(url);

            //get chart data 
            function getData(url){
                d3.json(url, function (error, data) {
                    if (error) throw error;
                        console.log(data);
                        buildNetwork(data);
                    });
            }
            

            function buildNetwork(data){
                link = link.data(data.links);
                link.exit().remove();
                link = link.enter().append("line")
                  .attr("stroke-width", function(d) { return 2; })
                  .merge(link);

                node = node.data(data.nodes);
                node.exit().remove();
                node = node.enter().append("g")
                      .attr("class", "node")
                      .merge(node)
                      .on("click", loadInfo)
                      .call(d3.drag()
                          .on("start", dragstarted)
                          .on("drag", dragged)
                          .on("end", dragended))
                      .on("mouseover", function() {
                            d3.select(this).select("circle").attr("r", maxradius);
                        })
                      .on("mouseout", function() {
                            d3.select(this).select("circle").attr("r", radius);
                        });

                node.append("circle")
                    .attr("r", radius)
                    .attr("fill", function(d) { return color(d.group); });

                node.append("text")
                    .attr("text-anchor", "middle")
                    .text(function(d) { return d.id; });

                simulation
                    .nodes(data.nodes)
                    .on("tick", ticked);

                simulation.force("link")
                    .links(data.links)
                    .distance(function(d) {
                        return 30;
                        });

                simulation.alpha(1).restart();

                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("transform", function(d) {
                            var boundx = Math.max(maxradius, Math.min(width - maxradius, d.x));
                            var boundy = Math.max(maxradius, Math.min(height - maxradius, d.y));
                            return "translate(" + boundx + "," + boundy + ")"; 
                        });
                }
            }

            function loadInfo(d,i){
                console.log('hello');
                if (d3.event.defaultPrevented) return; // dragged
                console.log(d3.event);
                console.log('loadInfo');
                var information = "Name: "+ d.name + ", Group: " + d.group;
                info.text(information);
            }

            function dragstarted(d) {
                if (!d3.event.active) simulation.alphaTarget(0.6).restart();
                d.fx = d.x;
                d.fy = d.y;
            }

            function dragged(d) {

                d.fx = Math.max(maxradius, Math.min(width - maxradius, d3.event.x));
                d.fy = Math.max(maxradius, Math.min(height - maxradius, d3.event.y));
            }

            function dragended(d) {
                if (!d3.event.active) simulation.alphaTarget(0);
                d.fx = null;
                d.fy = null;
            }

        </script>

    </body>
 </html>
	{
	"nodes":[
	{"name":"node1","group":1},
	{"name":"node2","group":2},
	{"name":"node3","group":2},
	{"name":"node4","group":3}
	],
	"links":[
	{"source":2,"target":1,"weight":1},
	{"source":0,"target":2,"weight":3}
	]
	}
	<!doctype html>
	<meta charset="utf-8">
	<html>
	<head>
	<title>Basic Network</title>
	<style>
	body {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	}

	form { float: left; margin: 10px; }

	.field { margin: 15px 0; }

	#chart {
	border: 1px solid #ccc;
	}

	select {
	padding: 3px;
	}

	.links line {
	stroke: #999;
	stroke-opacity: 0.6;
	}

	.node circle {
	stroke: #fff;
	stroke-width: 1.5px;
	}
	.node text {
	font-size: 12px;
	}


	</style>
	</head>
	<body>

	<svg id="chart" width="500" height="500"></svg>

	<script src="https://d3js.org/d3.v4.min.js"></script>

	<!-- Chart related script -->
	<script>
	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height");

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

	var node = svg.append("g")
	.attr("class", "nodes")
	.selectAll("g.node");

	var info = svg.append("text")
	.attr("class","info")
	.attr("transform","translate(10,20)");

	var radius = "6",
	maxradius = "8";

	var color = d3.scaleOrdinal()
	.range(["#111f33", "#5e88a2", "#d7e3ea"]);

	var simulation = d3.forceSimulation()
	.force("link", d3.forceLink().id(function(d) {
	return d.index; }))
	.force("charge", d3.forceManyBody().distanceMax(height/2))
	.force("center", d3.forceCenter(width / 2, height / 2));

	var url = "data.json";
	getData(url);

	//get chart data
	function getData(url){
	d3.json(url, function (error, data) {
	if (error) throw error;
	console.log(data);
	buildNetwork(data);
	});
	}


	function buildNetwork(data){
	link = link.data(data.links);
	link.exit().remove();
	link = link.enter().append("line")
	.attr("stroke-width", function(d) { return 2; })
	.merge(link);

	node = node.data(data.nodes);
	node.exit().remove();
	node = node.enter().append("g")
	.attr("class", "node")
	.merge(node)
	.on("click", loadInfo)
	.call(d3.drag()
	.on("start", dragstarted)
	.on("drag", dragged)
	.on("end", dragended))
	.on("mouseover", function() {
	d3.select(this).select("circle").attr("r", maxradius);
	})
	.on("mouseout", function() {
	d3.select(this).select("circle").attr("r", radius);
	});

	node.append("circle")
	.attr("r", radius)
	.attr("fill", function(d) { return color(d.group); });

	node.append("text")
	.attr("text-anchor", "middle")
	.text(function(d) { return d.id; });

	simulation
	.nodes(data.nodes)
	.on("tick", ticked);

	simulation.force("link")
	.links(data.links)
	.distance(function(d) {
	return 30;
	});

	simulation.alpha(1).restart();

	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("transform", function(d) {
	var boundx = Math.max(maxradius, Math.min(width - maxradius, d.x));
	var boundy = Math.max(maxradius, Math.min(height - maxradius, d.y));
	return "translate(" + boundx + "," + boundy + ")";
	});
	}
	}

	function loadInfo(d,i){
	console.log('hello');
	if (d3.event.defaultPrevented) return; // dragged
	console.log(d3.event);
	console.log('loadInfo');
	var information = "Name: "+ d.name + ", Group: " + d.group;
	info.text(information);
	}

	function dragstarted(d) {
	if (!d3.event.active) simulation.alphaTarget(0.6).restart();
	d.fx = d.x;
	d.fy = d.y;
	}

	function dragged(d) {

	d.fx = Math.max(maxradius, Math.min(width - maxradius, d3.event.x));
	d.fy = Math.max(maxradius, Math.min(height - maxradius, d3.event.y));
	}

	function dragended(d) {
	if (!d3.event.active) simulation.alphaTarget(0);
	d.fx = null;
	d.fy = null;
	}

	</script>

	</body>
	</html>