mardi 15 septembre 2015

hierarchical edge bundling checkbox

Im looking for a function where i can sort my JSON file content with checkboxes.

this is my json code:

[

{
    "name": "flare.forsker.Tavs Nyord",
    "url": "",
    "imports": 
    [
        "flare.projekt.NPK-Sensor"
    ]
}, 

{
    "name": "flare.forsker.Peter Gorm Larsen",
    "url": "",
    "imports": 
    [
        "flare.projekt.COMPASS",
        "flare.projekt.INTO-CPS"
    ]
},  

{
    "name": "flare.kategori.mekanik.Sustainable Energy Systems",
    "url": "",
    "imports": 
    [
        "flare.forsker.Tavs Nyord",

    ]
},

{
    "name": "flare.kategori.elektronik.Intergrated Electronics",
    "url": "",
    "imports": 
    [
        "flare.forsker.Peter Gorm Larsen"
    ]
},

{
    "name": "flare.projekt.COMPASS",
    "url": "",
    "imports": 
    [
        "flare.kategori.elektronik.Software Engineering"
    ]
},

{
    "name": "flare.projekt.INTO-CPS",
    "url": "",
    "imports": 
    [
        "flare.kategori.elektronik.Software Engineering"
    ]
},

{
    "name": "flare.projekt.NPK Sensor",
    "url": "",
    "imports": 
    [
        "flare.kategori.Bio.Air Quality Engineering"
    ]
}

]

And this is my JS:

var diameter = 1200,
radius = diameter / 2,
innerRadius = radius - 300;

var cluster = d3.layout.cluster()
.size([360, innerRadius])
.sort(null)
.separation(function (a, b) {
    return (a.parent == b.parent ? 1 : 2.8)
})
.value(function (d) {
    return d.size;
});

var bundle = d3.layout.bundle();

var line = d3.svg.line.radial()
.interpolate("bundle")
.tension(0.100)
.radius(function (d) {
    return d.y;
})
.angle(function (d) {
    return d.x / 180 * Math.PI;
});

var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");

var link = svg.append("g").selectAll(".link"),
node = svg.append("g").selectAll(".node");

d3.json("readme-flare-importsFULL.json", function (error, classes) {
if (error)
    throw error;

var nodes = cluster.nodes(packageHierarchy(classes)),
links = packageImports(nodes);

link = link
    .data(bundle(links))
    .enter().append("path")
    .each(function (d) {
        d.source = d[0],
        d.target = d[d.length - 1];
    })
    .attr("class", "link")
    .attr("d", line);

node = node
    .data(nodes.filter(function (n) {
            return !n.children;
        }))
    .enter()
    .append('a')
    .attr("xlink:href", function (d) {
        return d.url;
    })
    .attr('target', '_blank')
    .append("text")
    .attr("class", "node")
    .attr("dy", ".31em")
    .attr("transform", function (d) {
        return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)");
    })
    .style("text-anchor", function (d) {
        return d.x < 180 ? "start" : "end";
    })
    .text(function (d) {
        return d.key;
    })
    .on("mouseover", mouseovered)
    .on("mouseout", mouseouted);

});

function mouseovered(d) {
node
.each(function (n) {
    n.target = n.source = false;
});

link
.classed("link--target", function (l) {
    if (l.target === d)
        return l.source.source = true;
})
.classed("link--source", function (l) {
    if (l.source === d)
        return l.target.target = true;
})
.filter(function (l) {
    return l.target === d || l.source === d;
})
.each(function () {
    this.parentNode.appendChild(this);
});

node
.classed("node--target", function (n) {
    return n.target;
})
.classed("node--source", function (n) {
    return n.source;
});

}

function mouseouted(d) {
link
.classed("link--target", false)
.classed("link--source", false);

node
.classed("node--target", false)
.classed("node--source", false);

}

d3.select(self.frameElement).style("height", diameter + "px");

function packageHierarchy(classes) {
var map = {};

function find(name, data) {
    var node = map[name],
    i;
    if (!node) {
        node = map[name] = data || {
            name : name,
            children : []
        };
        if (name.length) {
            node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
            node.parent.children.push(node);
            node.key = name.substring(i + 1);
        }
    }
    return node;
}

classes.forEach(function (d) {
    find(d.name, d);
});

return map[""];

}

function packageImports(nodes) {
var map = {},
imports = [];

// Compute a map from name to node.
 nodes.forEach(function (d) {
    map[d.name] = d;
});

nodes.forEach(function (d) {
    if (d.imports)
        d.imports.forEach(function (i) {
            imports.push({
                source : map[d.name],
                target : map[i]
            });
        });
});

return imports;

}

Is there any way i can sort by "flare.kategori" or flare.projekt with checkboxes or radiobuttons so that the box that is checked (example flare.forsker) will only be displayed? thank you




Aucun commentaire:

Enregistrer un commentaire