place nodes generated from a force to a radial scatter plot - d3.js

Question

I have a force layout that generates some node positions for a given node-link diagram. My task is to place these nodes and links to a radial scatter plot. The nodes should be placed in such a way that their distance from the center node can be visible. For this reason, I calculate the euclidean distance of the nodes from the center and find maximum value from the calculated distance. Then scaled the radius of the radial plot within 0 to maximum distance value. But when I tried This example, the node-link diagram did not place upon the scatter plot. My question is how can I place the node co-ordinates to the plot such that the distance of the nodes from the center node can be seen by the circle line of the scatter plot.
Here is a portion of my input data
{
"nodes": [
{
"id": "A0",
"group": 0,
"degree": 19,
"name": "x"
},
{
"id": "P0",
"group": 0,
"degree": 3,
"name": "y"
},
{
"id": "P1",
"group": 0,
"degree": 3,
"name": "z"
},
{
"id": "P2",
"group": 0,
"degree": 1,
"name": "w"
}
],
"links": [
{
"source": "P0",
"target": "A0"
},
{
"source": "P1",
"target": "A0"
},
{
"source": "P2",
"target": "A0"
}
]
}
Here is a portion of my code.
var width = 1200,
height = 800,
radius = Math.min(width, height) / 2 - 30;
//console.log(");
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var rd_at = 3,
rd_pp = 2.5;
var author_cord = [];author_cord.push({x:width / 2,y:height / 2});
var given_person = 'x';
d3.json("json_file.json", function(graph) {
var simulation = d3.forceSimulation(graph.nodes)
.force("charge", d3.forceManyBody().strength(-500))
.force("center", d3.forceCenter(width / 2, height / 2))//ATTRACT NODES TO CENTER(width / 2, height / 2)
.force("x", d3.forceX(width / 2).strength(1))//X ALLIGN
.force("y", d3.forceY(height / 2).strength(1))//Y ALLIGN
.force("link", d3.forceLink(graph.links).id(function(d) {return d.id; ).distance(40).strength(1))
.stop();
var loading = svg.append("text")
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.text("Simulating. One moment please…");
d3.timeout(function() {
loading.remove();
for (var i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
simulation.tick();
}
var all_dist = [];
graph.nodes.forEach(function(d){
var d_x = d.x - author_cord[0].x;
var d_y = d.y - author_cord[0].y;
var dist = Math.sqrt(d_x*d_x + d_y+d_y);
all_dist.push(dt);
});
var max_dist = d3.max(all_dist, function(d) {
return d;
});
var r = d3.scaleLinear()
.domain([0,12])
.range([0, max_dist]);
var line = d3.lineRadial()
.radius(function(d) {
return r(d[1]);
});
var gr = svg.append("g")
.attr("class", "r axis")
.selectAll("g")
.data(r.ticks(10).slice(1))
.enter().append("g");
gr.append("circle")
.attr("r", r);
var links = svg.append("g")
.attr("stroke", "grey")
.attr("stroke-width", 1)
.selectAll("line")
.data(graph.links)
.enter().append("line")
.style("opacity", function(d) { return d.target.name == given_author? 0 : 1; } )
.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; });
var n = svg.append("g")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", function(d) {return d.group == 0 ? rd_at : rd_pp;})
.attr("fill", function(d) { return color(d.group); })
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("stroke", "#000")//.attr("stroke", function(d) {return d.group == 0 ? "red": "blue";})
.attr("stroke-width", function(d) {return d.group == 0 ? 1.5 : 1;});
});
});
Here is my output so far. . Here, in the picture green nodes are group 0 node and orange nodes are group 1. Here, center node is the ego node that should be place in the inner most center position of the radial plot

Answer 1

Your svg selection actually corresponds to a group already translated by half width and height:
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
Therefore, you can either change the "center", "x" and "y" in the simulation or, alternatively, you can just remove that group from the svg selection and translating the circles' groups instead:
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var gr = svg.append("g")
.attr("class", "r axis")
.selectAll("g")
.data(r.ticks(10).slice(1))
.enter()
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");