Vfrdtyky

I am developing a site locally using D3 JS. When I do anything outside of any function it is happening twice, no matter where it is within the code. Example:

console.log("2x");



Console output is:

2x

2x

However if the code is inside any of the functions it only prints once. I noticed that next to the logs there is two different locations for their origin

Console output

2x                                   site.js:3

2x                                   site.js?v=twO2e-dF40DXz0Jm_X753ZBfaW8vwQs0ht7UrLyed5E:3

Inside a function the logs only originate from the longer string version. This affects any code outside a function, it seems to run twice...I've included the full code for reference if required.

I have found many similarly titled or tagged questions but all of them were due to the logging occurring in a loop or otherwise, I couldn't find any where it happened in the base code.

EDIT: My code does have two console.logs but that results in 4 prints in that case sorry for being unclear on that.

JavaScript

//Azibuda



console.log("2x");



//Get the SVG element

var svg = d3.select("svg");



var width = 960, height = 600;

var color = d3.scaleOrdinal(d3.schemeCategory20);



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

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

var label = svg.append("g").selectAll(".label");



//Begin the force simulation

var simulation = d3.forceSimulation()

    .force("link", d3.forceLink().id(function (d) { return d.id; }).distance(50).strength(0.3))

    .force("charge", d3.forceManyBody().strength(-15))

    .force("center", d3.forceCenter(width / 2, height / 2));



//Highlight variables

var highlight_color = "blue";

var tHighlight = 0.05;



var config;



var linkedByIndex = {};

var linksAsString = {};



//Get the data

d3.json("/../../data.json", function (data) {



    config = data;

    if (!localStorage.graph)

    {

        localStorage.graph = JSON.stringify(data);

    }

    update();



});



function update() {



    console.log(localStorage.graph);



    //Create an array of source,target containing all links

    config.links.forEach(function (d) {

        linkedByIndex[d.source + "," + d.target] = true;

        linkedByIndex[d.target + "," + d.source] = true;



        //linksAsString[d.index] = d.source + "," + d.target;

    });



    var nodesAsString = {};

    config.nodes.forEach(function (d) {

        nodesAsString[d.index] = d.id + "," + d.radius;

    });



    //Draw links

    link = link.data(config.links);

    link.exit().remove();

    link = link.enter().append("line")

            .attr("class", "link")

            .attr("stroke-width", 2)

            .attr("stroke", "#888")

            //.attr("opacity", function (d) { if (d.target.radius > 7) { return 1 }; return 0; })

            .merge(link);         





    node = node.data(config.nodes);

    node.exit().remove();

    node = node.enter().append("circle")

            .attr("class", "node")

            .attr("r", function(d) { return d.radius; })

            .attr("fill", function (d) { return color(d.id); })

            .attr("stroke", "black")

        //  .attr("pointer-events", function (d) { if (d.radius <= 7) { return "none"; } return "visibleAll"; })

        //  .attr("opacity", function (d) { if (d.radius <= 7) { return 0; } return 1; })

            .call(d3.drag()

            .on("start", dragstarted)

            .on("drag", dragged)

            .on("end", dragended))

            .on("mouseover", mouseOver)

            .on("mouseout", mouseOut)

            .merge(node);



    label = label.data(config.nodes);

    label.exit().remove();

    label = label.enter().append("text")

            .attr("class", "label")

            .attr("dx", function (d) { return d.radius * 1.25; })

            .attr("dy", ".35em")

            .attr("opacity", function (d) { if (d.radius <= 7) { return 0; } return 1; })

            .attr("font-weight", "normal")

            .style("font-size", 10)

            .text(function (d) { return d.id; })

            .merge(label);



    //Add nodes to simulation

    simulation

        .nodes(config.nodes)

        .on("tick", ticked);



    //Add links to simulation

    simulation.force("link")

        .links(config.links);



    simulation.alphaTarget(0.3).restart();

}



//Animating by ticks function

function ticked() {

    node

        .attr("cx", function (d) { return d.x = Math.max(d.radius, Math.min(width - d.radius, d.x)); })

        .attr("cy", function (d) { return d.y = Math.max(d.radius, Math.min(height - d.radius, 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; });

    label

        .attr("x", function (d) { return d.x = Math.max(d.radius, Math.min(width - d.radius, d.x)); })

        .attr("y", function (d) { return d.y = Math.max(d.radius, Math.min(height - d.radius, d.y)); });

}



//Using above array, check if two nodes are linked

function isConnected(node1, node2) {

    return linkedByIndex[node1.id + "," + node2.id] || node1.index == node2.index;

}





//Highlight a node

function setHighlight(d) {

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



    //Set highlighted stroke around the current node, text and its links

    node.style("stroke", function (tNode) {

        return isConnected(d, tNode) ? highlight_color : "black";

    });



    label.style("font-weight", function (tNode) {

        return isConnected(d, tNode) ? "bold" : "normal";

    });



    link.style("stroke", function (tNode) {

        return tNode.source.index == d.index || tNode.target.index == d.index ? highlight_color : "#888";

    });

}



//Drag/mousedown on a node

function dragstarted(d) {

    if (!d3.event.active) simulation.alphaTarget(0.3).restart();

    d.fx = d.x;

    d.fy = d.y;

}



//Dragging a node

function dragged(d) {

    d.fx = d3.event.x;

    d.fy = d3.event.y;



    //Highlight/focus on held down node

    setFocus(d);

    setHighlight(d);

}



//End drag/mouseup on a node

function dragended(d) {

    if (!d3.event.active) simulation.alphaTarget(0);

    d.fx = null;

    d.fy = null;

}



//Mouse over on a node

function mouseOver(d) {

    setFocus(d);

    setHighlight(d);

}



//Mouse off of a node

function mouseOut(d) {

    unFocus(d);

    highlightOff();

}



//Turning off highlight

function highlightOff() {

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



    //Set node attributes back to normal

    node.style("stroke", "black");

    label.style("font-weight", "normal");

    link.style("stroke", "#888");

}



//Focus on a node

function setFocus(d) {

    //Set opacity of all non-connected nodes and their elements (text/links) to faded

    node.style("opacity", function (tNode) {

        return isConnected(d, tNode) ? 1 : tHighlight;

    });



    label.style("opacity", function (tNode) {

        return isConnected(d, tNode) ? 1 : tHighlight;

    });



    link.style("opacity", function (tNode) {

        return tNode.source.index == d.index || tNode.target.index == d.index ? 1 : tHighlight;

    });

}



//Unfocus on a node (reset all to normal)

function unFocus(d) {

    //node.style("opacity", function (d) { if (d.radius <= 7) { return 0; } return 1; });

    //node.style("pointer-events", function (d) { if (d.radius <= 7) { return "none"; } return "visibleAll"; })

    node.style("opacity", 1);

    label.style("opacity", function (d) { if (d.radius <= 7) { return 0; } return 1; });

    //link.style("opacity", function (d) { if (d.target.radius > 7) { return 1 }; return 0; });

    link.style("opacity", 1);

}



function updateR()

{

    console.log(config.nodes[2]);

    config.nodes.splice(2, 1);

    update();

}



var temp = JSON.parse(localStorage.graph);



//temp.nodes.push({"id":"Cheese", "radius":20});



//localStorage.graph = JSON.stringify(temp);



console.log("2x");

HTML

@{

    ViewData["Title"] = "Home Page";

}

<link href="/css/geico-design-kit.css" rel="stylesheet">

<script src="~/js/geico-design-kit.bundle.js"></script>

<script src="~/js/d3.js"></script>

<script src="~/js/site.js"></script>

<script src="https://d3js.org/d3.v4.min.js"></script>

<style>

    .link line {

        stroke: #888;

    }



    text {

        pointer-events: none;

        font: 10px sans-serif;

    }

</style>





<div class="col-md-12">

    <div class="col-md-3">

        <h2>Quick Links</h2>

        <ul class="list list--unordered">

            <li>Example Quick Links Here</li>

            <li><a href="http://www.google.com">Google</a></li>

            <li><a href="http://www.google.com">Google</a></li>

        </ul>

    </div>

</div>

<button onclick="updateR()" type="button" style="background-color:red">DO NOT PRESS!</button>



<svg id="container" width="960" height="600" style="border:1px solid black;"></svg>

<form id="nodes"></form>

If this ASP.NET view is using a layout view and the same file is referenced in that layout file, the rendered output would have multiple references.