We Keep Coding

D3js Dynamically draw multiple separate lines

I am relatively new to D3js. I went through the basics of a tutorial on Udemy by Adam Janes. I want to create multiple separate lines that can connect nodes on the following map.
The green dots are nodes, I want to use a line to show a connection between the nodes. The data used to draw the nodes:
[
{
"_id": "5bd940c7c917bd051c995dca",
"whereID": "100110060000",
"SN": 67,
"position": [
1085.2642276422764,
564.0921409214093
],
"trainStatus": 0,
"missionSN": 1
},
...
{
"_id": "5bc6e4e5603d6112000e028a",
"whereID": "100110060000",
"SN": 32,
"position": [
1037.511770244821,
440.9957627118644
],
"trainStatus": 0,
"missionSN": 1
},
{
"_id": "5bc6e4e5603d6112000e0289",
"whereID": "100110060000",
"SN": 31,
"position": [
1181.314736346516,
357.909604519774
],
"trainStatus": 0,
"missionSN": 1
},
{
"_id": "5bc6e4e5603d6112000e0288",
"whereID": "100110060000",
"SN": 30,
"position": [
1433.7688323917137,
309.9752824858757
],
"trainStatus": 0,
"missionSN": 1,
"connectedNodes": [
{
"SN": 62,
"position": [
1459.3338041431261,
333.4098399246704
],
"whereID": "100110060000"
}
]
},
{
"_id": "5bc6e4e5603d6112000e0287",
"whereID": "100110060000",
"SN": 29,
"position": [
1702.201035781544,
308.91007532956684
],
"trainStatus": 0,
"missionSN": 1,
"connectedNodes": [
{
"SN": 61,
"position": [
1732.026836158192,
333.4098399246704
],
"whereID": "100110060000"
},
{
"SN": 62,
"position": [
1459.3338041431261,
333.4098399246704
],
"whereID": "100110060000"
}
]
},
...
]
With the above data, I am trying to use position values to create the {x1, y1} values and connecting them with connectedNodes.position values creating {x2, y2}. The problem I am encountering is that, there can be multiple connectedNodes, so how do I draw the line?
This is what I have:
view = svg.append('svg')
.attr('width', '100%')
.attr('height', '100%')
.attr('class', 'view-container')
.append('g')
.attr('width', '100%')
.attr('height', '100%')
.attr('class', 'view')
nodeUpdate = view.selectAll('.trainingNode').data(useData);
nodeEnter = nodeUpdate.enter().append('g').attr('class', 'trainingNode');
nodeEnter
.append('line')
.attr('x1', d => {
if (d.connectedNodes && d.connectedNodes.length > 0)
return d.position[0]
})
.attr('x2', d => {
if (d.connectedNodes && d.connectedNodes.length > 0)
return d.position[0]
})
.attr('y1', d => {
if (d.connectedNodes && d.connectedNodes.length > 0)
return d.connectedNodes[0].position[0]
})
.attr('y2', d => {
if (d.connectedNodes && d.connectedNodes.length > 0)
d.connectedNodes[0].position[0]
})
.style('stroke', 'black')
.style('stroke-width', 5)
EDIT: After a while on reading up about force simulations, I have successfully added lines linking the nodes together, however it only shows properly for the top half of the canvas.
This is the code I used:
let links = []
useData.forEach(ud => {
if (ud.connectedNodes && ud.connectedNodes.length > 0) {
ud.connectedNodes.forEach(node => {
links.push({
source: node.SN,
target: ud.SN
})
})
}
})
let simulation = d3.forceSimulation()
.force('link', d3.forceLink().id(d => d.SN))
simulation.nodes(useData)
simulation.force('link')
.links(links)
let line = nodeEnter.append('line')
.data(links)
.attr('x1', d => Math.floor(d.source.position[0] * widthRatio))
.attr('y1', d => Math.floor(d.source.position[1] * widthRatio))
.attr('x2', d => Math.floor(d.target.position[0] * widthRatio))
.attr('y2', d => Math.floor(d.target.position[1] * widthRatio))
.style('stroke', 'black')
.style('stroke-width', 3)

javascript zoomable tree map click the last node

How can I capture the click event for the last node?
I followed this tutorial(http://bl.ocks.org/ganeshv/6a8e9ada3ab7f2d88022) to make the tree map. In my purpose I want to make the last node clickable, then get the node data send it to server.
I used the developer tool to get the structure of tree map.
My code in the js file is that:
function display(d) {
lastGroupArray = [];
// collectLastGroup(d);
console.log(lastGroupArray);
grandparent
.datum(d.parent)
.on("click", transition)
.select("text")
.text(name(d));
var g1 = svg.insert("g", ".grandparent")
.datum(d)
.attr("class", "depth");
var g = g1.selectAll("g")
.data(d._children)
.enter().append("g");
g.filter(function (d) { return d._children; })
.classed("children", true)
.on("click", transition);
var children = g.selectAll(".child")
.data(function(d) { return d._children || [d]; })
.enter().append("g");
children.append("rect")
.attr("class", "child")
.call(rect)
.append("title")
.text(function(d) { return d.name + " (" + formatNumber(d.value) + ")"; });
//append child text
children.append("text")
.attr("class", "ctext")
.text(function(d) { return d.name; })
.call(text2);
//append parent text
g.append("rect")
.attr("class", "parent")
.call(rect);
var ccc = g.selectAll("rect").on("click", function (d){
if(typeof d.lastGroup !== 'undefined'){
d.lastGroup.forEach( function (dd) {
// lastGroupArray.push(new LastGroup(dd));
console.log(dd.filePath);
});
}
})
My function above only can capture the last node when it has a parent.
The function will not work if the node is the last child when the treemap is loaded.
The Payee is the last node when the treemap is loaded.
Here is my JSON data:
The payee is on the bottom, it only has one parent which is the root "digit-first2".
{
"children": [
{
"lastGroup": [{
"filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result1.csv",
"name": "0~2",
"value": 112
}],
"children": [
{
"lastGroup": [{
"filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result3.csv",
"name": "0~2",
"value": 218
}],
"children": [{
"lastGroup": [{
"filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result7.csv",
"name": "0~2",
"value": 836
}],
"name": "Payee",
"value": 836
}],
"name": "Tran Type",
"value": 218
},
{
"lastGroup": [{
"filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result5.csv",
"name": "0~2",
"value": 834
}],
"name": "Payee",
"value": 834
}
],
"name": "[Code-Finger-Print, [Memo]]",
"value": 112
},
{
"lastGroup": [{
"filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result2.csv",
"name": "0~2",
"value": 138
}],
"children": [{
"lastGroup": [{
"filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result6.csv",
"name": "0~2",
"value": 766
}],
"name": "Payee",
"value": 766
}],
"name": "Tran Type",
"value": 138
},
{
"lastGroup": [{
"filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result4.csv",
"name": "0~2",
"value": 731
}],
"name": "Payee",
"value": 731
}
],
"name": "digit-first2"
}
My function above will only work when the root is not the parent of the last node.
My question is how can I capture the click event for the node if the root is this node`s parent.

You can achieve the last node click by changing the json structure. The last child should have one more children key with all the last child's properties copied in the children key with the same name .
For example if the last child is AgglomerativeCluster . Then the structure can be
children: [
{
name: "cluster",
children: [
{ name: "AgglomerativeCluster",
children: [{name: "AgglomerativeCluster",value: 3938,count:39}] },
{ name: "CommunityStructure", value: 3812 },
]
}
Find the full implementation here https://codesandbox.io/s/affectionate-thunder-l024x

There is simple example;
function display(d) {
grandparent
.datum(d.parent)
.on("click", transition)
.select("text")
.text(name(d));
var g1 = svg.insert("g", ".grandparent")
.datum(d)
.attr("class", "depth");
var g = g1.selectAll("g")
.data(d._children)
.enter().append("g");
g.filter(function (d) { return d._children; })
.classed("children", true)
.on("click", transition);
var children = g.selectAll(".child")
.data(function (d) { return d._children || [d]; })
.enter().append("g");
children.append("rect")
.attr("class", "child")
.call(rect)
.append("title")
.text(function (d) {
return d.key + " (" + formatNumber(d.value) + ")";
});
children.append("text")
.attr("class", "ctext")
.text(function (d) { return d.key; })
.call(text2);
g.append("rect")
.attr("class", "parent")
.call(rect);
var t = g.append("text")
.attr("class", "ptext")
.attr("dy", ".75em")
t.append("tspan")
.text(function (d) { return d.key; });
t.append("tspan")
.attr("dy", "1.0em")
.text(function (d) { return formatNumber(d.value); });
t.call(text);
var isDeph = false;
g.selectAll("rect")
.style("fill", function (d) {
if (d.values != null) {
isDeph = true;
}
return d.color;
})
.attr('onclick', function (d) {
if (!isDeph) {
return d.data
}
return ''
});
function transition(d) {
if (transitioning || !d)
return;
transitioning = true;
var g2 = display(d),
t1 = g1.transition().duration(750),
t2 = g2.transition().duration(750);
// Update the domain only after entering new elements.
x.domain([d.x, d.x + d.dx]);
y.domain([d.y, d.y + d.dy]);
// Enable anti-aliasing during the transition.
svg.style("shape-rendering", null);
// Draw child nodes on top of parent nodes.
svg.selectAll(".depth").sort(function (a, b) {
return a.depth - b.depth;
});
// Fade-in entering text.
g2.selectAll("text").style("fill-opacity", 0);
// Transition to the new view.
t1.selectAll(".ptext").call(text).style("fill-opacity", 0);
t1.selectAll(".ctext").call(text2).style("fill-opacity", 0);
t2.selectAll(".ptext").call(text).style("fill-opacity", 1);
t2.selectAll(".ctext").call(text2).style("fill-opacity", 1);
t1.selectAll("rect").call(rect);
t2.selectAll("rect").call(rect);
// Remove the old node when the transition is finished.
t1.remove().each("end", function () {
svg.style("shape-rendering", "crispEdges");
transitioning = false;
});
}
return g;
}

D3.js: Dynamically generate source and target based on identical json values

Good day, I am a novice in d3/javascript and this may be an easy/repeated question, but I just cannot get this section of my code to work..
I have this json array here:
var myArray = [{"id": "red", "value":"1"},
{"id": "orange", "value":"2"},
{"id": "yellow", "value":"3"},
{"id": "green", "value":"1"},
{"id": "blue", "value":"1"},
{"id": "violet", "value":"3"}];
I understand that for me to create links between nodes in D3, I need an array with a [{"source": "___", "target": "___"} structure.
Is anyone able to guide me in linking the above array items based on their values (i.e. the node graph will link all nodes with identical values together)?
One solution in my mind now is to iterate manually through and create links using the for..if.. loop, but this will iterate many times if I have many nodes (>1000?) and will create duplicates along the way.
Here is a picture of the desired output:

This is a solution using nested for loops:
var links = [];
for (var i = 0; i < nodes.length; i++) {
for (var j = i + 1; j < nodes.length; j++) {
if (nodes[i].value === nodes[j].value) {
links.push({
source: nodes[i].id,
target: nodes[j].id
});
}
}
}
Here is a demo:
var nodes = [{
"id": "red",
"value": "1"
}, {
"id": "orange",
"value": "2"
}, {
"id": "yellow",
"value": "3"
}, {
"id": "green",
"value": "1"
}, {
"id": "blue",
"value": "1"
}, {
"id": "violet",
"value": "3"
}];
var links = [];
for (var i = 0; i < nodes.length; i++) {
for (var j = i + 1; j < nodes.length; j++) {
if (nodes[i].value === nodes[j].value) {
links.push({
source: nodes[i].id,
target: nodes[j].id
});
}
}
}
console.log(links);
And here is a demo of the force, with your array:
var nodes = [{
"id": "red",
"value": "1"
}, {
"id": "orange",
"value": "2"
}, {
"id": "yellow",
"value": "3"
}, {
"id": "green",
"value": "1"
}, {
"id": "blue",
"value": "1"
}, {
"id": "violet",
"value": "3"
}];
var links = [];
for (var i = 0; i < nodes.length; i++) {
for (var j = i + 1; j < nodes.length; j++) {
if (nodes[i].value === nodes[j].value) {
links.push({
source: nodes[i].id,
target: nodes[j].id
});
}
}
};
var width = 300, height = 300;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(50))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(links)
.enter().append("line")
.attr("stroke-width", 1)
.attr("stroke", "gray")
.attr("fill", "none");
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 10)
.attr("stroke", "gray")
.attr("fill", function(d) { return d.id; });
simulation
.nodes(nodes)
.on("tick", ticked);
simulation.force("link")
.links(links);
function ticked() {
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; });
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
<script src="https://d3js.org/d3.v4.min.js"></script>

How to draw the force chart in d3 v4?

I'm new to d3 and when I learnt how to draw a force chart, I had some problems about it. And at first, let we see my code here:
<html>
<head>
<meta charset="UTF-8">
<title>the force chart</title>
</head>
 
<body>
<script src="http://d3js.org/d3.v4.min.js"></script>
    <script>
var width = 400;
var height = 400;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var nodes = [ { "id": "English" },{ "id": "Italy" },
{ "id": "America" },{ "id": "Canada" },
{ "id": "Australia" },{ "id": "Japan" },
{ "id": "China" } ];
var edges = [ { "source": 0 , "target": 1 } , { "source": 0 , "target": 2 },
{ "source": 0 , "target": 3 } , { "source": 1 , "target": 4 },
{ "source": 1 , "target": 5 } , { "source": 1 , "target": 6 }, ];
var force = d3.forceSimulation(nodes)
.force("link",d3.forceLink()
.id(function(d){return d.id})
.distance(function(d){return 150}).strength([-400]))
.force("charge",d3.forceManyBody())
.force("center",d3.forceCenter(width , height));
force.restart(); //start
var svg_edges = svg.selectAll("line")
.data(edges)
.enter()
.append("line")
.style("stroke","#ccc")
.style("stroke-width",1);
var color = d3.scaleOrdinal(d3.schemeCategory20);
//add nodes
var svg_nodes = svg.selectAll("circle")
.data(nodes)
.enter()
.append("r",20)
.style("fill",function(d,i){
return color(i);
})
.call(d3.drag()); //to drag the nodes
//add information
var svg_texts = svg.selectAll("text")
.data(nodes)
.enter()
.append("text")
.style("fill", "black")
.attr("dx", 20)
.attr("dy", 8)
.text(function(d){
return d.id;
});
force.on("tick", function(){ //update the position of lines
svg_edges.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; })
//update the position of nodes
svg_nodes.attr("cx",function(d){ return d.x; })
.attr("cy",function(d){ return d.y; });
//update the position of information
svg_texts.attr("x",function(d){ return d.x; })
.attr("y",function(d){ return d.y; });
});
    </script>    
</body>
</html>
I want to draw a picture like this:
But my code can only show one node, just like this:
So I feel confused, because there is no error in Developer Tools. As I layout the force, I infer to https://github.com/d3/d3-force/blob/master/README.md#links . So I solve the problem which is result from the different versions. But why it still doesn't work? Could you help me? I'm very appreciate it if you help me! Thank you!

Besides the points already explained by #Vinod:
.append("circle")
and
.force("center", d3.forceCenter(width/2, height/2));
You have a trailing comma. But the most important is this, to show the edges:
First, add the edges to the simulation:
force.force("link")
.links(edges);
And then, change the links id. Right now, there is no property called id. So, it should be:
.force("link", d3.forceLink()
.id(function(d,i) {
return i
})
//the rest of the function
Here is a demo:
var width = 400;
var height = 400;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var nodes = [{
"id": "English"
}, {
"id": "Italy"
}, {
"id": "America"
}, {
"id": "Canada"
}, {
"id": "Australia"
}, {
"id": "Japan"
}, {
"id": "China"
}];
var edges = [{
"source": 0,
"target": 1
}, {
"source": 0,
"target": 2
}, {
"source": 0,
"target": 3
}, {
"source": 1,
"target": 4
}, {
"source": 1,
"target": 5
}, {
"source": 1,
"target": 6
}];
var force = d3.forceSimulation()
.force("link", d3.forceLink()
.id(function(d,i) {
return i
})
.distance(function(d) {
return 150
}))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width/2, height/2));
force.restart(); //start
var svg_edges = svg.selectAll("line")
.data(edges)
.enter()
.append("line")
.style("stroke", "#ccc")
.style("stroke-width", 1);
var color = d3.scaleOrdinal(d3.schemeCategory20);
//add nodes
var svg_nodes = svg.selectAll("circle")
.data(nodes)
.enter()
.append("circle")
.attr("r", 20)
.style("fill", function(d, i) {
return color(i);
})
.call(d3.drag()); //to drag the nodes
//add information
var svg_texts = svg.selectAll("text")
.data(nodes)
.enter()
.append("text")
.style("fill", "black")
.attr("dx", 20)
.attr("dy", 8)
.text(function(d) {
return d.id;
});
force.nodes(nodes);
force.force("link")
.links(edges);
force.on("tick", function() { //update the position of lines
svg_edges.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;
})
//update the position of nodes
svg_nodes.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
//update the position of information
svg_texts.attr("x", function(d) {
return d.x;
})
.attr("y", function(d) {
return d.y;
});
});
<script src="https://d3js.org/d3.v4.min.js"></script>

There are several mistakes in your code
firstly you need to append circle like this
var svg_nodes = svg.selectAll("circle")
.data(nodes)
.enter()
.append("circle")
.attr("r",20)
.style("fill",function(d,i){
return color(i);
})
.call(d3.drag()); //to drag the nodes
where as your code append r which is no SVG tag moreover the center of the graph should not be width and height it should be width/2 and height/2 to make it at center
See this fiddle http://jsfiddle.net/Qh9X5/9515/
similarly for lines you are using edges data which don't have the x,y values you need to pass the xy value for drawing lines
For a complete solution note in v3.3 See this https://jsfiddle.net/3uehrfj8/1/ with all nodes and edges

Cannot make a pack layout in d3? selectAll not working?

I am relatively new to coding and very new to d3. I am currently trying to use d3 with json to make a pack layout representing current presidential candidates and how many times they have talked about a certain issue during the feedback.
I wanted to start small so I made some dummy data in a .json file, it is below:
{
"name": "John Doe",
"party": "democratic",
"issues": [
{ "issue":"issue1", "value": 25 },
{ "issue":"issue2", "value": 10 },
{ "issue":"issue3", "value": 50 },
{ "issue":"issue4", "value": 40 },
{ "issue":"issue5", "value": 5 }
]
}
I want to display bubbles with "issue" as the label and "value" as the circle radius, ending up with five different sized circles on my canvas. Below is my index.html file:
var width = 800, height = 600;
var canvas = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(50, 50)");
var pack = d3.layout.pack()
.size([width, height - 50])
.padding(10);
d3.json("fakedata.json", function (data) {
var nodes = pack.nodes(data);
var node = canvas.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
node.append("circle")
.attr("r", function (d) { return d.r; })
.attr("fill", "steelblue")
.attr("opacity", 0.25)
.attr("stroke", "#ADADAD")
.attr("stroke-width", "2");
node.append("text")
.text(function (d) {
return d.children ? "" : d.issue;
});
});
I keep getting the error below and I think it is because node is not being set correctly.
Error: Invalid value for <g> attribute transform="translate(NaN,NaN)"
Error: Invalid value for <circle> attribute r="NaN"
Any help would be much appreciated! Thank you!

The JSON you are passing is
{
"name": "John Doe",
"party": "democratic",
"issues": [
{ "issue":"issue1", "value": 25 },
{ "issue":"issue2", "value": 10 },
{ "issue":"issue3", "value": 50 },
{ "issue":"issue4", "value": 40 },
{ "issue":"issue5", "value": 5 }
]
}
It should have been like below note the key name children instead of issues
{
"name": "John Doe",
"party": "democratic",
"children": [
{ "issue":"issue1", "value": 25 },
{ "issue":"issue2", "value": 10 },
{ "issue":"issue3", "value": 50 },
{ "issue":"issue4", "value": 40 },
{ "issue":"issue5", "value": 5 }
]
}
Working code here.

The answer is a bit late, but in case you don't want to change your data structure and you want to keep the issues property, you can explicitly tell D3 to use the issues property for children data using the children() call:
var pack = d3.layout.pack()
.size([width, height - 50])
.children(function (d) { return d.issues; })
.padding(10);