radial tree test

forked from evenkeeler's block: radial tree test

<!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; }
    .node circle {
      fill: #999;
    }

.node text {
      font: 10px sans-serif;
    }

.node--internal circle {
      fill: #555;
    }

.node--internal text {
      text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
    }

.link {
      fill: none;
      stroke: #555;
      stroke-opacity: 0.4;
      stroke-width: 1.5px;
    }
  </style>
</head>

<body>
  <svg width="960" height="1060"></svg>
  <script>
		var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height"),
      g = svg.append("g").attr("transform", "translate(" + (width / 2 + 40) + "," + (height / 2 + 90) + ")");

var stratify = d3.stratify()
      .parentId(d => d.id.substring(0, d.id.lastIndexOf(".")))

var tree = d3.tree()
      .size([2 * Math.PI, 500])
      .separation((a,b) => (a.parent == b.parent ? 1 : 2) / a.depth)

d3.csv("flare.csv", (error, data) => {
    if (error) throw error;

var root = tree(stratify(data));

var link = g.selectAll(".link")
      .data(root.links())
      .enter().append("path")
        .attr("class", "link")
        .attr("d", d3.linkRadial()
            .angle(d => d.x)
            .radius(d => d.y))

var node = g.selectAll(".node")
      .data(root.descendants())
      .enter().append("g")
      .attr("class", d => "node" + (d.children ? " node--internal" : " node--leaf"))
      .attr("transform", d =>"translate(" + radialPoint(d.x, d.y) + ")")

node.append("circle")
        .attr("r", 2.5)
    		.on('mouseover', d => {
      		let moused = node.select('circle').filter(e => e.id === d.id)
          moused.attr('fill', 'red')
    		})

node.append("text")
        .attr("dy", "0.31em")
        .attr("x", d => d.x < Math.PI === !d.children ? 6 : -6)
        .attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end")
        .attr("transform", d => "rotate(" + (d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 180 / Math.PI + ")")
        .text(d => d.id.substring(d.id.lastIndexOf(".") + 1))
  });
    
  function stylePipe(element, styleObject) {
    for (key in styleObject) {
      element.attr(key, styleObject[key])
    }
  }

function radialPoint(x, y) {
    return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];
  }
  </script>
</body>

https://d3js.org/d3.v4.min.js