d3.js - grouping a node within a projection -

d3.js - grouping a node within a projection -

i trying create sphere of connected nodes using orthographic projection serve sort of navigation. have managed create basic thought fiddle

but having problem figuring out how create grouping of node in order append text/circle can scale node on mouseover etc.

i guess nodes part of projection 'points' rather appendages due nature of projection?!

the code have far , fiddle: http://jsfiddle.net/unit60/oztw93cx/

var width = window.innerwidth, height = window.innerheight - 5, fill = d3.scale.category20(), nodes = [{x: width/2, y: height/2}], links = []; var projection = d3.geo.orthographic() .scale(height/2.5) .translate([width / 2, height / 2]) var path = d3.geo.path() .projection(projection) var forcefulness = d3.layout.force() .linkdistance([40]) .linkstrength([0]) .gravity(0.1) .size([width, height]) .charge([-400]); var svg = d3.select("svg") .attr("width", width) .attr("height", height) .call(d3.behavior.drag() .origin(function() { var r = projection.rotate(); homecoming {x: 2 * r[0], y: -2 * r[1]}; }) .on("drag", function() { force.start(); var r = [d3.event.x / 2, -d3.event.y / 2, projection.rotate()[2]]; t0 = date.now(); origin = r; projection.rotate(r); })) var lines = svg.selectall("path.link") .data(dataset.edges) .enter() .append("path") .attr("class", "link"); var nodes = svg.selectall("path.node") .data(dataset.nodes) .enter() .append("path") .attr("class", function (d) { homecoming d.class; }) .style("cursor","pointer") .style("fill", function(d) { if (d.color) {return "red"} else { homecoming "#fff" } ;}) .call(force.drag); forcefulness .nodes(dataset.nodes) .links(dataset.edges) .on("tick", tick) .start() setinterval(function(){force.alpha(0.01);}); function tick() { nodes.attr("d", function(d) { var p = path({"type":"feature","geometry":{"type":"point","coordinates":[d.x, d.y]}}); homecoming p ? p : 'm 0 0' }); lines.attr("d", function(d) { var p = path({"type":"feature","geometry":{"type":"linestring","coordinates":[[d.source.x, d.source.y],[d.target.x, d.target.y]]}}); homecoming p ? p : 'm 0 0' }); }

any help?

d3.js