test

test

HTML

<select id="opts">
    <option value="A" selected="selected">Set A</option>
    <option value="B">Set B</option>
</select>
<div id="familytreecontentsvg">

JavaScript

// The source Data
var A = {
    "nodes": [{
        "id": 0,
        "name": "One"
    }, {
        "id": 1,
        "name": "Two"
    }, {
        "id": 2,
        "name": "Three"
    }],
        "edges": [{
        "source": 0,
        "target": 1,
        "value": "edge-A-One"
    }, {
        "source": 1,
        "target": 2,
        "value": "edge-A-Two"
    }]
};
var B = {
    "nodes": [{
        "id": 0,
        "name": "One"
    }, {
        "id": 1,
        "name": "Two"
    }],
        "edges": [{
        "source": 0,
        "target": 1,
        "value": "Edge-B-One"
    }]
};

var w = 300;
var h = 500;

//Width and height for SVG area
var svg;

// Double click to 'unfix' the node and have forces start to act on it again.
function dblclick(d) {
    d3.select(this).classed("fixed", d.fixed = false);
}
// Set the "fixed" property of the dragged node to TRUE when a dragstart event is initiated,
//   - removes "forces" from acting on that node and changing its position.
function dragstart(d) {
    d3.select(this).classed("fixed", d.fixed = true);
}

function drawFN(dataset) {
    var force = d3.layout.force()
        .nodes(dataset.nodes)
        .links(dataset.edges)
        .gravity(0.05)
        .charge(-180)
        .linkDistance(200)
        .size([w, h])
        .start();
    
    svg = d3.select("#familytreecontentsvg").append("svg")
    .attr("width", w)
    .attr("height", h);

    var drag = force.drag()
        .on("dragstart", dragstart);

    //------------- EDGES  -----------------------
    // Edges are defined before nodes because nodes should appear on top of edges
    var edges = svg.selectAll("line")
        .data(dataset.edges, function (d) {
        return d.value;
    }); //Key needed for EXIT.
    //ENTER
    edges.enter()
        .append("line")
    //.attr("id",function(d,i){return 'edge'+i})
    .attr("stroke", "#808080")
        .attr("stroke-width", 2)
        .attr("marker-end", "url(#end)");

    //------------- NODES ...