<commit_before><style>

    body {
        overflow:hidden;
        margin:0;
    }

    .node circle {
        cursor: pointer;
        fill: #ccc;
        stroke: #000;
        stroke-width: 1.5px;
    }

    .node text {
        font: 10px sans-serif;
        pointer-events: none;
        text-anchor: middle;
    }

    line.link {
        stroke: #000;
        stroke-width: 1.5px;
        fill: green;
        stroke-dasharray: 0,2 1;
    }

</style>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

    var width = window.innerWidth,
            height = window.innerHeight,
            root;

    var force = d3.layout.force()
            .linkDistance(80)
            .charge(-120)
            .gravity(.05)
            .size([width, height])
            .on("tick", tick);

    var svg = d3.select(".main").append("svg")
            .attr("width", width)
            .attr("height", height);

    var min_zoom = 0.1;
    var max_zoom = 7;
    var zoom = d3.behavior.zoom().scaleExtent([min_zoom,max_zoom]);

    svg.style("cursor","move");

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

    d3.json("/especies/<%= @especie.id %>/json_d3", function(error, json) {
        if (error) throw error;

        root = json;
        update();
    });

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

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

        // Update links.
        link = link.data(links, function(d) { return d.target.id; });

        link.exit().remove();

        link.enter().insert("line", ".node")
                .attr("class", "link");

        // Update nodes.
        node = node.data(nodes, function(d) { return d.id; });

        node.exit().remove();

        var nodeEnter = node.enter().append("g")
                .attr("class", "node")
                .on("click", click)
                .call(force.drag);

        nodeEnter.on("dblclick.zoom", function(d) { d3.event.stopPropagation();
            var dcx = (window.innerWidth/2-d.x*zoom.scale());
            var dcy = (window.innerHeight/2-d.y*zoom.scale());
            zoom.translate([dcx,dcy]);
            node.attr("transform", "translate("+ dcx + "," + dcy  + ")scale(" + zoom.scale() + ")");


        });

        nodeEnter.append("circle")
                .attr("r", 10);

        nodeEnter.append("text")
                .attr("dy", ".35em")
                .text(function(d) { return d.name; });

        node.select("circle")
                .style("fill", color);
    }

    function tick() {
        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; });

        node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    }

    function color(d) {
        return d._children ? "#3182bd" // collapsed package
                : d.children ? "#c6dbef" // expanded package
                : "#fd8d3c"; // leaf node
    }

    // Toggle children on click.
    function click(d) {
        if (d3.event.defaultPrevented) return; // ignore drag
        if (d.children) {
            d._children = d.children;
            d.children = null;
        } else {
            d.children = d._children;
            d._children = null;
        }
        update();
    }

    // Returns a list of all nodes under the root.
    function flatten(root) {
        var nodes = [], i = 0;

        function recurse(node) {
            //node.id = ++i;
            if (node.children)
            {
                node.children.forEach(recurse);
              //  console.log(node)
            }
            //if (node.name == "flare") {
                if (!node.id) node.id = ++i;
                nodes.push(node);

            //}
        }

        recurse(root);
        return nodes;
    }

</script><commit_msg>D3 - ahora se peude hacer zoom y los nodos y links no se deforman parte V<commit_after><style>

    .node circle {
        cursor: pointer;
        fill: #ccc;
        stroke: #000;
        stroke-width: 1.5px;
    }

    .node text {
        font: 10px sans-serif;
        pointer-events: none;
        text-anchor: middle;
    }

    line.link {
        stroke: #000;
        stroke-width: 1.5px;
    }

</style>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

    var min_zoom = 0.1;
    var max_zoom = 7;
    var zoom = d3.behavior.zoom().scaleExtent([min_zoom,max_zoom]);

    var width = 900,
            height = 500,
            root;

    var force = d3.layout.force()
            .linkDistance(80)
            .charge(-300)
            .gravity(.05)
            .size([width, height])
            .on("tick", tick);

    var svg = d3.select(".main").append("svg")
            .attr("width", width)
            .attr("height", height)
            .style("cursor","move");

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

    d3.json("/especies/<%= @especie.id %>/json_d3", function(error, json) {
        if (error) throw error;

        root = json;
        update();
    });

    zoom.on("zoom", function() {
        g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    });

    svg.call(zoom);

    resize();

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

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

        // Update links.
        link = link.data(links, function(d) { return d.target.id; });

        link.exit().remove();

        link.enter().insert("line", ".node")
                .attr("class", "link");

        // Update nodes.
        node = node.data(nodes, function(d) { return d.id; });

        node.exit().remove();

        var nodeEnter = node.enter().append("g")
                .attr("class", "node")
                .on("click", click)
                .call(force.drag().on("dragstart", dragstart));

        nodeEnter.append("circle")
                .attr("r", 10);

        nodeEnter.append("text")
                .attr("dy", ".35em")
                .text(function(d) { return d.name; });

        node.select("circle")
                .style("fill", color);
    }

    function tick() {
        node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

        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; });
    }

    function color(d) {
        return d._children ? "#3182bd" // collapsed package
                : d.children ? "#c6dbef" // expanded package
                : "#fd8d3c"; // leaf node
    }

    // Toggle children on click.
    function click(d) {
        if (d3.event.defaultPrevented) return; // ignore drag
        if (d.children) {
            d._children = d.children;
            d.children = null;
        } else {
            d.children = d._children;
            d._children = null;
        }
        update();
    }

    // Returns a list of all nodes under the root.
    function flatten(root) {
        var nodes = [], i = 0;

        function recurse(node) {
            //node.id = ++i;
            if (node.children)
            {
                node.children.forEach(recurse);
              //  console.log(node)
            }
            //if (node.name == "flare") {
                if (!node.id) node.id = ++i;
                nodes.push(node);

            //}
        }

        recurse(root);
        return nodes;
    }

    function resize() {
        var w = 900, h = 500;
        svg.attr("width", w).attr("height", h);

        force.size([force.size()[0]+(w-width)/zoom.scale(),force.size()[1]+(h-height)/zoom.scale()]).resume();
        width = w;
        height = h;
    }

    function dragstart(d) {
        d3.event.sourceEvent.stopPropagation();
        d3.select(this).classed("fixed", d.fixed = true);
    }

</script>
{'fraction_non_alphanumeric': 0.1663745764692137, 'fraction_numerical': 0.014254001635705105, 'mean_word_length': 1.511737089201878, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4103477', 'n_tokens_mistral': 2772, 'n_tokens_neox': 2596, 'n_words': 537}