Collapsible with no text

Collapsible with no text

by Chad Bryant

CSS

circle.node {
	cursor: pointer;
	stroke: #34495e;
	stroke-width: 2px;
	box-sizing: border-box;
	stroke-location: inside;
}

line.link {
	fill: none;
	stroke: #34495e;
	stroke-width: 1.5px;
}
circle.node {
	  fill: lightsteelblue;
	  stroke: #555;
	  stroke-width: 3px;
	}
	circle.leaf {
	  stroke: #fff;
	  stroke-width: 1.5px;
	}
	path.hull {
	  fill: lightsteelblue;
	  fill-opacity: 0.3;
	}
	line.link {
	  stroke: #333;
	  stroke-opacity: 0.5;
	  pointer-events: none;
	}

JavaScript

var components = [{
    name: "component 1",
    id: "c1",
    children: [{
        name: "hardware 1",
        id: "h1",
        children: [{
            name: "software1",
            id: "s1"
        }],
    }, {
        name: "hardware 2",
        id: "h2",
        children: [{
            name: "software2",
            id: "s2"
        }, {
            name: "software3",
            id: "s3"
        }]
    }]
}];

var w = 600,
    h =600,
    radius = 10,
    node,
    link,
    root;

var force = d3.layout.force()
    .on("tick", tick)
    .charge(function (d) {
    return -500;
})
    .linkDistance(function (d) {
    return d.target._children ? 100 : 50;
})
    .size([w, h - 160]);

var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);

root = components[0]; //set root node
root.fixed = true;
root.x = w / 2;
root.y = h / 2 - 80;
update();

function update() {
    var nodes = flatten(root),
        links = d3.layout.tree().links(nodes);

    // Restart the force layout.
    force.nodes(nodes)
        .links(links)
        .start();

    // Update the links…
    link = svg.selectAll(".link")
        .data(links);

    // Enter any new links.
    link.enter().insert("svg:line", ".node")
        .attr("class", "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;
    });

    // Exit any old links.
    link.exit().remove();

    // Update the nodes…
    node = svg.selectAll("circle.node")
        .data(nodes);

    node.transition()
        .attr("r", radius);

    // Enter any new nodes.
    node.enter().append("circle")
        .attr("class", "node")
        .attr("cx", function (d) {
        return d.x;
    })
        .attr("cy", function (d) {
        return d.y;
    })
        .attr("r", radius)
       ...