JSFiddle - React, Tailwind, and code Playground

by Teppo Jussmäki

HTML

<script src="https://d3js.org/topojson.v1.min.js"></script>

CSS

.node {
		cursor: pointer;
	}

	.node circle {
	  fill: #fff;
	  stroke: steelblue;
	  stroke-width: 3px;
	}

	.node text {
	  font: 12px sans-serif;
    
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently
                                 not supported by any browser */
}
  
  
svg {
  border: 1px #000000 solid;
  }

	.link {
	  fill: none;
	  stroke: #ccc;
	  stroke-width: 2px;
	}
  .vor0 {
	  fill: #fff;
    fill-opacity: 0.2;
    stroke: #000;
    stroke-width: 0px;
  }
  .vor1 {
	  fill: #ff4;
  }
  .vor2 {
	  fill: #f4f;
  }
  .vor3 {
	  fill: #4ff;
  }

JavaScript

var margin = {top: 20, right: 120, bottom: 20, left: 120};
var width = 700 - margin.right - margin.left;
var height = 500 - margin.top - margin.bottom;

var tree = d3.layout.tree()
    .size([height, width]);

var diagonal = d3.svg.diagonal()
	.projection(function(d) { return [d.y, d.x]; });



//var diagonal = d3.svg.diagonal.radial()
//    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });


var zoom = d3.behavior.zoom()
    .scaleExtent([0.1, 5])
    .on("zoom", zoomed);
var drag = d3.behavior.drag()
    .origin(function(d) { return d; })
    //.on("dragstart", dragstarted)
    .on("drag", dragged);
 //   .on("dragend", dragended);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
    .call(zoom);

var rect = svg.insert("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "none")
    .style("pointer-events", "all");
var container = svg.append("g");

var smoothline = d3.svg.line()
    .interpolate("basis-closed");//("basis-closed");

/*
var treeData = [

{ "name": "root", "parent": "none", "children": [{"name": "Taustatiedot","parent": "root","children": [{"name": "Sukupuoli","parent": "Taustatiedot"},{"name": "Syntymävuosi","parent": "Taustatiedot"},{"name": "Siviilisääty","parent": "Taustatiedot"},{"name": "vuotta","parent": "Taustatiedot"},{"name": "Missä asutte tällä hetkellä:","parent": "Taustatiedot"},{"name": "Kuinka moni kotitalouteenne kuuluvista on (älkää laskeko itseänne mukaan)","parent": "Taustatiedot","children": [{"name": "alle 7-vuotiaita","parent": "Kuinka moni kotitalouteenne kuuluvista on (älkää laskeko itseänne mukaan)"}]},{"name": "Kuinka moni kotitalouteenne kuuluvista on (älkää laskeko itseänne mukaan)","parent": "Taustatiedot","children": [{"name": "alle 3-vuotiaita","parent": "Kuinka moni...