Untitled

d3.select('.link, #bacteria in suspended poc_other suspension feeders').node()
<line class="link" id="phytoplankton_ciliates" x1="230" x2="130.65489174816582" y1="0" y2="189.286289155541"></line>

<!DOCTYPE html>
<html>
<head>
<title> Subject Clusters </title>
<style>

.link {
    fill: none;
    stroke: #888888;
    stroke-weight: 1px;
    opacity: 0.4;
}

</style>
<script src="https://d3js.org/d3.v4.min.js"></script>

</head>


<svg id = "canvas"></svg>
<body>

<script>

diameter = 500;
radius = diameter / 2

d3.select("#canvas")
    .attr("width", diameter)
    .attr("height", diameter)


var plot = d3.select("#canvas")
    .append("g")
    .attr("id", "plot")
    .attr("transform", "translate(" + radius + "," + radius + ")");

d3.json("test.json", function(data) {
    the_data = data

    circular_layout(data.nodes);
    create_nodes(data.nodes)
    match_data(data);
    draw_links(data.links);
});

<!-- compute circular coordinates -->
function circular_layout(node_list){

    var scale = d3.scaleLinear()
        .domain([0, node_list.length])
        .range([0,2*Math.PI]);


    node_list.forEach( function(d,i) {
        var theta = scale(i);
        var radial = radius - 20;

        d.x = radial*Math.cos(theta);
        d.y = radial*Math.sin(theta);
    });
};

<!-- create nodes -->
function create_nodes(node_list){

    d3.select("#plot").selectAll(".node")
        .data(node_list)
        .enter()
        .append("circle")
        .attr("class", "node")
        .attr("id", function(d) { return d.name })
        .attr("cx", function(d) { return d.x })
        .attr("cy", function(d) { return d.y })
        .attr("fill", "black")
        .attr("r", 5);

}


<!-- convert node names into objects containing (x,y) coordinates -->
function match_data(graph_data){

    names = [];
    graph_data.nodes.forEach( function(d,i) {
        names[i] = d.name[0]
    })

    graph_data.links.forEach( function(d,i) {
        var v1 = d.from[0];
        var v2 = d.to[0]

        d.from = graph_data.nodes[ names.indexOf(v1) ];
        d.to = graph_data.nodes[ names.indexOf(v2) ];

    })
}

<!-- create links -->
function draw_links(link_list){

    d3.select("#plot").selectAll(".link")
        .data(link_list)
        .enter()
        .append("line")
        .attr("class", "link")
        .attr("id", function(d){ return d.from.name[0] + "_" + d.to.name[0]} )   <!-- this is where IDs are assigned -->
        .attr("x1", function(d){ return d.from.x; })
        .attr("x2", function(d){ return d.to.x; })
        .attr("y1", function(d){ return d.from.y; })
        .attr("y2", function(d){ return d.to.y; });

}
</script>
</body>
</html>