d3js force-directed graph draws nodes but no links - d3.js

Question

I am having force-directed graph. It shows nodes without problems and on console it writes links - source and target. But doesn't connect it to nodes. I can see there is no field for coordinators see picture
Whole code is in Kibana and more complicated but here is the core:
const link = svg.selectAll('link')
.data(links)
.enter()
.append('svg:line')
.attr('class', 'link')
.style("stroke-width", function (d) {return Math.sqrt(d.value);})
.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;});
force.on("tick", tick);
function tick() {
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("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"; });
};
var node = svg.selectAll('node')
.data(nodes)
.enter()
.append('circle')
.attr('class', 'node')
.style("opacity", .9)
.attr("r", function(d) { return 10; })
.attr("id", function(d) { return d.id; })
.attr("cy", function(d){return d.y;})
.attr("cx", function(d){return d.x;})
.style("fill", function(d) { return c20(d.value);})
.style("stroke-width", 20);
const svg = div.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate('+ width / 2 + ',' + height / 3 + ')');
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.charge(-150)
.linkDistance(90)
.start();
MY data structure:
links =
[{"source": 0, "target": 1, "value": 30},
{"source": 0, "target": 2, "value": 5},
{"source": 1, "target": 3, "value": 1},
{"source": 2, "target": 0, "value": 20}]
nodes =
[{"ip": "92.15.122.1", "value": 5, id: 0},
{"ip": "12.154.154.22", "value": 20, id: 1},
{"ip": "255.12.11.1", "value": 30, id: 2},
{"ip": "54.55.6.55", "value": 1, id: 3}]
I think the problem is connecting "id" from "nodes" to "source" and "target" in links. Any idea how?

Answer 1

You need to set the stroke colour on the link variable
var link = svg.selectAll('link')
.data(links)
.enter()
.append('line')
.attr('class', 'link')
.style("stroke", 'black')
See below the full snippet. I have cleaned it up to get it to run in a Stack snippet.
var width = 320,
height = 240;
links = [{
"source": 0,
"target": 1,
"value": 30
},
{
"source": 0,
"target": 2,
"value": 5
},
{
"source": 1,
"target": 3,
"value": 1
},
{
"source": 2,
"target": 0,
"value": 20
}
]
nodes = [{
"ip": "92.15.122.1",
"value": 5,
id: 0
},
{
"ip": "12.154.154.22",
"value": 20,
id: 1
},
{
"ip": "255.12.11.1",
"value": 30,
id: 2
},
{
"ip": "54.55.6.55",
"value": 1,
id: 3
}
]
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height)
.attr('transform', 'translate(' + width / 2 + ',' + height / 3 + ')');
var force = d3.layout.force()
.size([width, height])
.nodes(nodes)
.links(links);
function tick() {
node.attr('r', width / 25)
.attr('cx', function(d) {
return d.x;
})
.attr('cy', function(d) {
return d.y;
});
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;
});
}
force.on("tick", tick);
var link = svg.selectAll('link')
.data(links)
.enter()
.append('line')
.attr('class', 'link')
.style("stroke", 'black')
.style("stroke-width", function(d) {
return Math.sqrt(d.value);
}).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 node = svg.selectAll('node')
.data(nodes)
.enter()
.append('circle')
.attr('class', 'node')
.style("opacity", .9)
.attr("r", function(d) {
return 10;
})
.attr("id", function(d) {
return d.id;
})
.attr("cy", function(d) {
return d.y;
})
.attr("cx", function(d) {
return d.x;
})
.style("stroke-width", 20);
force
.nodes(nodes)
.links(links)
.charge(-150)
.linkDistance(90)
.start();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>