D3ForceDecompProblem

by Simon Raper

HTML

<svg></svg>

JavaScript

circleData = [{
    "key": "sun", 
    "x": 10,
        "y": 10,
        "r": 10
}, {
    "key": "moon",
    "x": 50,
        "y": 50,
        "r": 15
}, {
    "key": "earth",
    "x": 90,
        "y": 90,
        "r": 30
}]

circleData2 = [{
    "key": "sun", 
    "x": 10,
        "y": 10,
        "r": 10
}, {
    "key": "earth",
    "x": 90,
        "y": 90,
        "r": 30
}]




svg = d3.select("svg");

svg.selectAll(".node")
    .data(circleData, function(d){return d.key;})
    .enter()
    .append("circle")
    .attr("class", "node")
    .attr("cx", function (d) {
    return d.x
})
    .attr("cy", function (d) {
    return d.y
})
    .attr("r", function (d) {
    return d.r
});

setTimeout(dropCircle, 1000);

function dropCircle() {
    
    //d3.keys(circleData).forEach(
    //    function (nodeKey) {
    //        if (circleData[nodeKey].r > 20) {
    //            
    //            
    //             console.log(circleData[nodeKey]); 
//        }
     //   }
        
    //    );
    circles = d3.selectAll(".node");
    console.log(circleData);
    console.log(circleData2);
    circles.data(circleData2, function(d){return d.key;}).exit().remove();
}