patricker/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

var simulation = d3.forceSimulation()
            .nodes(graph.nodes);

        simulation
            .force("charge_force", d3.forceManyBody().strength(-100))
            .force("center_force", d3.forceCenter(width / 2, height / 2))
            .force("links", d3.forceLink(graph.links).id(function (d: any) { return d.id; }))
            .force("collide", d3.forceCollide().radius(12))
            ;

        simulation
            .on("tick", ticked);

        //add encompassing group for the zoom
        var g = svg.append("g")
            .attr("class", "everything");

        //Create deffinition for the arrow markers showing relationship directions
        g.append("defs").append("marker")
            .attr("id", "arrow")
            .attr("viewBox", "0 -5 10 10")
            .attr("refX", 20)
            .attr("refY", 0)
            .attr("markerWidth", 8)
            .attr("markerHeight", 8)
            .attr("orient", "auto")
            .append("svg:path")
            .attr("d", "M0,-5L10,0L0,5");

        var link = g.append("g")
            .attr("class", "links")
            .selectAll("line")
            .data(graph.links)
            .enter().append("line")
            .attr("stroke", function(d: any) { return d3.color("#000000"); })
            .attr("marker-end", "url(#arrow)");

        var node = g.append("g")
            .attr("class", "nodes")
            .selectAll("circle")
            .data(graph.nodes)
            .enter()
            .append("circle")
            .attr("r", 10)
            .attr("fill", function(d) {
                if (d.lotid == term) return d3.color("#00FF00");
                if (d.sourceOnly) return d3.color("#0000FF");

                return d3.color("#FFFF2F"); })
            .style("stroke", function(d) {
                if (d.lotid == term) return d3.color("#008000");
                if (d.sourceOnly) return d3.color("#000080");

                return d3.color("#FF8D2F");
            });

        //add drag capabilities
        var drag_handler = d3.drag()
            .on("start", drag_start)
            .on("drag", drag_drag)
            .on("end", drag_end);

        drag_handler(node);

        var text = g.append("g").attr("class", "labels").selectAll("g")
            .data(graph.nodes)
            .enter().append("g")
            .append("text")
            .attr("x", 14)
            .attr("y", ".31em")
            .style("font-family", "sans-serif")
            .style("font-size", "0.7em")
            .text(function (d: any) { return d.lotid; });

        node.on("click", function (d: any) {
            d3.event.stopImmediatePropagation();
            self.onNodeClicked.emit(d.id);
        });

        node.append("title")
            .text(function (d: any) { return d.lotid; });

        //add zoom capabilities
        var zoom_handler = d3.zoom()
            .on("zoom", zoom_actions);

        zoom_handler(svg);

        //Drag functions
        //d is the node
        function drag_start(d) {
            if (!d3.event.active) simulation.alphaTarget(0.3).restart();
            d.fx = d.x;
            d.fy = d.y;
        }

        //make sure you can't drag the circle outside the box
        function drag_drag(d) {
            d.fx = d3.event.x;
            d.fy = d3.event.y;
        }

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

        //Zoom functions
        function zoom_actions(){
            g.attr("transform", d3.event.transform)
        }

        function ticked() {
            //update circle positions each tick of the simulation
            node
                .attr("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; });

            //update link positions
            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; });

            text
                .attr("transform", function (d: any) { return "translate(" + d.x + "," + d.y + ")"; });
        }
  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	// Feel free to change or delete any of the code you see in this editor!
	var svg = d3.select("body").append("svg")
	.attr("width", 960)
	.attr("height", 500)

	var simulation = d3.forceSimulation()
	.nodes(graph.nodes);

	simulation
	.force("charge_force", d3.forceManyBody().strength(-100))
	.force("center_force", d3.forceCenter(width / 2, height / 2))
	.force("links", d3.forceLink(graph.links).id(function (d: any) { return d.id; }))
	.force("collide", d3.forceCollide().radius(12))
	;

	simulation
	.on("tick", ticked);

	//add encompassing group for the zoom
	var g = svg.append("g")
	.attr("class", "everything");

	//Create deffinition for the arrow markers showing relationship directions
	g.append("defs").append("marker")
	.attr("id", "arrow")
	.attr("viewBox", "0 -5 10 10")
	.attr("refX", 20)
	.attr("refY", 0)
	.attr("markerWidth", 8)
	.attr("markerHeight", 8)
	.attr("orient", "auto")
	.append("svg:path")
	.attr("d", "M0,-5L10,0L0,5");

	var link = g.append("g")
	.attr("class", "links")
	.selectAll("line")
	.data(graph.links)
	.enter().append("line")
	.attr("stroke", function(d: any) { return d3.color("#000000"); })
	.attr("marker-end", "url(#arrow)");

	var node = g.append("g")
	.attr("class", "nodes")
	.selectAll("circle")
	.data(graph.nodes)
	.enter()
	.append("circle")
	.attr("r", 10)
	.attr("fill", function(d) {
	if (d.lotid == term) return d3.color("#00FF00");
	if (d.sourceOnly) return d3.color("#0000FF");

	return d3.color("#FFFF2F"); })
	.style("stroke", function(d) {
	if (d.lotid == term) return d3.color("#008000");
	if (d.sourceOnly) return d3.color("#000080");

	return d3.color("#FF8D2F");
	});

	//add drag capabilities
	var drag_handler = d3.drag()
	.on("start", drag_start)
	.on("drag", drag_drag)
	.on("end", drag_end);

	drag_handler(node);

	var text = g.append("g").attr("class", "labels").selectAll("g")
	.data(graph.nodes)
	.enter().append("g")
	.append("text")
	.attr("x", 14)
	.attr("y", ".31em")
	.style("font-family", "sans-serif")
	.style("font-size", "0.7em")
	.text(function (d: any) { return d.lotid; });

	node.on("click", function (d: any) {
	d3.event.stopImmediatePropagation();
	self.onNodeClicked.emit(d.id);
	});

	node.append("title")
	.text(function (d: any) { return d.lotid; });

	//add zoom capabilities
	var zoom_handler = d3.zoom()
	.on("zoom", zoom_actions);

	zoom_handler(svg);

	//Drag functions
	//d is the node
	function drag_start(d) {
	if (!d3.event.active) simulation.alphaTarget(0.3).restart();
	d.fx = d.x;
	d.fy = d.y;
	}

	//make sure you can't drag the circle outside the box
	function drag_drag(d) {
	d.fx = d3.event.x;
	d.fy = d3.event.y;
	}

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

	//Zoom functions
	function zoom_actions(){
	g.attr("transform", d3.event.transform)
	}

	function ticked() {
	//update circle positions each tick of the simulation
	node
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; });

	//update link positions
	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; });

	text
	.attr("transform", function (d: any) { return "translate(" + d.x + "," + d.y + ")"; });
	}
	</script>
	</body>