JavaScript代码在函数外部执行两次

Question

我正在使用D3 JS在本地开发一个站点。当我在任何功能之外执行任何操作时，无论它在代码中的什么位置，它都会发生两次。示例：

console.log("2x");

Console output is:
2x
2x

但是，如果代码在任何函数中，则仅打印一次。我注意到，在日志旁边，有两个不同的原始位置

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

在函数中，日志仅源自较长的字符串版本。这会影响函数外的任何代码，它似乎会运行两次...如果需要，我已提供了完整的代码以供参考。

我发现了许多标题或标签相似的问题，但是所有这些都是由于循环中发生日志记录或其他原因所致，我无法在基本代码中找到发生问题的地方。

编辑：我的代码确实有两个console.logs，但是在这种情况下导致打印4张，对此感到不清楚。

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>

Answer 1

如果此ASP.NET视图使用布局视图，并且在该布局文件中引用了同一文件，则呈现的输出将具有多个引用。