AdrienLemaire/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This is a slight varation of example given by mbostock
Click on the Nodes to Zoom in.
Double Click on the Nodes to Zoom out.
forked from nivas8292's block: Force Layout - Directed Graph with Customized Node and Link

  
## index.html
<html>
    <head>
        <title>D3 Force Layout Example 1</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="main.css">
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        <script src="https://d3js.org/d3-queue.v3.min.js"></script>
    <style>
            path.link {
                fill: none;
                stroke: #666;
                stroke-width: 1.5px;
            }

            circle {
                fill: #ccc;
                stroke: #fff;
                stroke-width: 1.5px;
            }

            text {
                fill: #000;
                font: 10px sans-serif;
                pointer-events: none;
            }

        </style>
    </head>
    <body>
        <script>
            var w = 800;
            var h = 450;
            var margin = {
                top: 20,
                bottom: 20,
                left: 20,
                right: 20
            };
            var width = w - margin.left - margin.right;
            var height = h - margin.top - margin.bottom;

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

            var linkScale = d3.scale.linear()
                    .range([0.25, 1.0]);

            var colorScale = d3.scale.category20();

            d3.queue()
            .defer(d3.csv, "nodes.csv")
            .defer(d3.csv, "links.csv")
            .await(function (error, products, links) {
              nodes = {}
                products.forEach(function(node) {
                  nodes[node.source] = {
                    name: node.source,
                  	nodeWeight: +node.value,
                  }
                })
								console.log(nodes)
                links.forEach(function (link) {
                    link.value = +link.value;
                    link.source = nodes[link.source] || (
                      nodes[link.source] = {name: link.source, nodeWeight: 1}
                    );
                    link.target = nodes[link.target] || (
                      nodes[link.target] = {name: link.target, nodeWeight: 1}
                    );
                });

                linkScale.domain(d3.extent(links, function (d) {
                    return d.value;
                }));

                var force = d3.layout.force()
                        .nodes(d3.values(nodes))
                        .links(links)
                        .size([width, height])
                        .linkDistance(60)
                        .charge(-300)
                        .on("tick", tick)
                        .start();

                svg.append("svg:defs").selectAll('marker')
                        .data(['end'])
                        .enter()
                        .append("svg:marker")
                        .attr('id', function (d) {
                            return d;
                        })
                        .attr('viewBox', '0 -5 10 10')
                        .attr('refX', 15)
                        .attr('refY', -1.5)
                        .attr('markerWidth', 6)
                        .attr('markerHeight', 6)
                        .attr('orient', 'auto')
                        .append('svg:path')
                        .attr("d", "M0,-5L10,0L0,5");

                var path = svg.append("svg:g").selectAll("path")
                        .data(force.links())
                        .enter()
                        .append("svg:path")
                        .classed("link", true)
                        .attr("marker-end", "url(#end)");

                var node = svg.selectAll(".node")
                        .data(force.nodes())
                        .enter()
                        .append("g")
                        .classed("node", true)
                        .on("click", click)
                        .on("dblclick", dblclick)
                        .call(force.drag());

                node.append("circle")
                        .attr("r", function(d) {
                  				return d.nodeWeight * 10
                				})
                        .style("fill", function (d) {
                            return colorScale(d.name)
                        });


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

                function tick() {
                    path.attr("d", function (d) {
                        var dx = d.target.x - d.source.x,
                                dy = d.target.y - d.source.y,
                                dr = Math.sqrt(dx * dx + dy * dy);

                        return "M" +
                                d.source.x + "," + d.source.y +
                                "A" + dr + "," + dr + " 0 0,1 " +
                                d.target.x + "," + d.target.y;
                    }).style("opacity", function (d) {
                        return linkScale(d.value);
                    });

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

                function click() {
                    d3.select(this).select("text").transition()
                            .duration(750)
                            .attr("x", 22)
                            .style("fill", "steelblue")
                            .style("stroke", "lightsteelblue")
                            .style("stroke-width", ".5px")
                            .style("font", "20px sans-serif");

                    d3.select(this).select("circle").transition()
                            .duration(750)
                            .attr("r", 16);
                }

                function dblclick() {
                    d3.select(this).select("text").transition()
                            .duration(750)
                            .attr("x", 12)
                            .style("fill", "black")
                            .style("stroke", "none")
                            .style("stroke-width", "none")
                            .style("font", "10px sans-serif");

                    d3.select(this).select("circle").transition()
                            .duration(750)
                            .attr("r", 6);
                }
            });
        </script>
    </body>
</html>

## links.csv

          
            source
            target
            value

            
              改善グループ
              MiraFlow
              0.2

## main.css
body, html {
    margin:0;
    padding:0;
    font-family:"Arial", sans-serif;
    font-size:0.95em;
    text-align:center;
}

#chart {
    background-color:#F5F2EB;
    border: 1px solid #CCC;
}

.bar {
    fill:purple;
    shape-rendering:crispEdges;
}

.bar-label {
    text-anchor:end;
    fill:white;
}

.axis path,
.axis line {
    fill:none;
    stroke:#000;
    shape-rendering:crispEdges;
}

.gridline path,
.gridline line {
    fill: none;
    stroke: #ccc;
    shape-rendering: crispEdges;
}

.trendline {
    fill: none;
    stroke: #ccc;
    stroke-width: 2;
    /*stroke-dasharray:10;*/
}

.area {
    fill: #ccc;
    stroke: #ccc;
    opacity: 0.25;
}

.donut {
    opacity:0.1;
}
.axis-label {
    text-anchor: middle;
}
.chart-header {
    text-transform: capitalize;
    font-size: 110%;
}
.temperature {
    stroke:#95cddf;
    stroke-width:2px;
}

.rain {
    fill:none;
    stroke:#cc627a;
    stroke-width:0.5;
}

#cursor {
    stroke: black;
}

## nodes.csv

          
            source
            value

            
              Standout
              1

            
              Chibiwork
              2

            
              MiraFlow
              2

            
              GoUnite
              4

            
              Reachat
              5

            
              Website制作
              5
	<html>
	<head>
	<title>D3 Force Layout Example 1</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="main.css">
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="https://d3js.org/d3-queue.v3.min.js"></script>
	<style>
	path.link {
	fill: none;
	stroke: #666;
	stroke-width: 1.5px;
	}

	circle {
	fill: #ccc;
	stroke: #fff;
	stroke-width: 1.5px;
	}

	text {
	fill: #000;
	font: 10px sans-serif;
	pointer-events: none;
	}

	</style>
	</head>
	<body>
	<script>
	var w = 800;
	var h = 450;
	var margin = {
	top: 20,
	bottom: 20,
	left: 20,
	right: 20
	};
	var width = w - margin.left - margin.right;
	var height = h - margin.top - margin.bottom;

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

	var linkScale = d3.scale.linear()
	.range([0.25, 1.0]);

	var colorScale = d3.scale.category20();

	d3.queue()
	.defer(d3.csv, "nodes.csv")
	.defer(d3.csv, "links.csv")
	.await(function (error, products, links) {
	nodes = {}
	products.forEach(function(node) {
	nodes[node.source] = {
	name: node.source,
	nodeWeight: +node.value,
	}
	})
	console.log(nodes)
	links.forEach(function (link) {
	link.value = +link.value;
	link.source = nodes[link.source] \|\| (
	nodes[link.source] = {name: link.source, nodeWeight: 1}
	);
	link.target = nodes[link.target] \|\| (
	nodes[link.target] = {name: link.target, nodeWeight: 1}
	);
	});

	linkScale.domain(d3.extent(links, function (d) {
	return d.value;
	}));

	var force = d3.layout.force()
	.nodes(d3.values(nodes))
	.links(links)
	.size([width, height])
	.linkDistance(60)
	.charge(-300)
	.on("tick", tick)
	.start();

	svg.append("svg:defs").selectAll('marker')
	.data(['end'])
	.enter()
	.append("svg:marker")
	.attr('id', function (d) {
	return d;
	})
	.attr('viewBox', '0 -5 10 10')
	.attr('refX', 15)
	.attr('refY', -1.5)
	.attr('markerWidth', 6)
	.attr('markerHeight', 6)
	.attr('orient', 'auto')
	.append('svg:path')
	.attr("d", "M0,-5L10,0L0,5");

	var path = svg.append("svg:g").selectAll("path")
	.data(force.links())
	.enter()
	.append("svg:path")
	.classed("link", true)
	.attr("marker-end", "url(#end)");

	var node = svg.selectAll(".node")
	.data(force.nodes())
	.enter()
	.append("g")
	.classed("node", true)
	.on("click", click)
	.on("dblclick", dblclick)
	.call(force.drag());

	node.append("circle")
	.attr("r", function(d) {
	return d.nodeWeight * 10
	})
	.style("fill", function (d) {
	return colorScale(d.name)
	});


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

	function tick() {
	path.attr("d", function (d) {
	var dx = d.target.x - d.source.x,
	dy = d.target.y - d.source.y,
	dr = Math.sqrt(dx * dx + dy * dy);

	return "M" +
	d.source.x + "," + d.source.y +
	"A" + dr + "," + dr + " 0 0,1 " +
	d.target.x + "," + d.target.y;
	}).style("opacity", function (d) {
	return linkScale(d.value);
	});

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

	function click() {
	d3.select(this).select("text").transition()
	.duration(750)
	.attr("x", 22)
	.style("fill", "steelblue")
	.style("stroke", "lightsteelblue")
	.style("stroke-width", ".5px")
	.style("font", "20px sans-serif");

	d3.select(this).select("circle").transition()
	.duration(750)
	.attr("r", 16);
	}

	function dblclick() {
	d3.select(this).select("text").transition()
	.duration(750)
	.attr("x", 12)
	.style("fill", "black")
	.style("stroke", "none")
	.style("stroke-width", "none")
	.style("font", "10px sans-serif");

	d3.select(this).select("circle").transition()
	.duration(750)
	.attr("r", 6);
	}
	});
	</script>
	</body>
	</html>
	body, html {
	margin:0;
	padding:0;
	font-family:"Arial", sans-serif;
	font-size:0.95em;
	text-align:center;
	}

	#chart {
	background-color:#F5F2EB;
	border: 1px solid #CCC;
	}

	.bar {
	fill:purple;
	shape-rendering:crispEdges;
	}

	.bar-label {
	text-anchor:end;
	fill:white;
	}

	.axis path,
	.axis line {
	fill:none;
	stroke:#000;
	shape-rendering:crispEdges;
	}

	.gridline path,
	.gridline line {
	fill: none;
	stroke: #ccc;
	shape-rendering: crispEdges;
	}

	.trendline {
	fill: none;
	stroke: #ccc;
	stroke-width: 2;
	/stroke-dasharray:10;/
	}

	.area {
	fill: #ccc;
	stroke: #ccc;
	opacity: 0.25;
	}

	.donut {
	opacity:0.1;
	}
	.axis-label {
	text-anchor: middle;
	}
	.chart-header {
	text-transform: capitalize;
	font-size: 110%;
	}
	.temperature {
	stroke:#95cddf;
	stroke-width:2px;
	}

	.rain {
	fill:none;
	stroke:#cc627a;
	stroke-width:0.5;
	}

	#cursor {
	stroke: black;
	}
	source	value
	Standout	1
	Chibiwork	2
	MiraFlow	2
	GoUnite	4
	Reachat	5
	Website制作	5