javascript - JS error under win 10: ReferenceError: d3 is not defined

Question

I have a js file named main_dog.js and a html file named study.html

If I run my script in the browser, it's working as expected. But the problem is when I run the js code, it's showing "ReferenceError: d3 is not defined".

My main_dog.js unit test file looks like this:

var graph;

var defaultX = 0, defaultY = 1;
var x0 = null, x0old = null, x1 = null, dims = [];
var attrNo = null, attr = null, attr2 = [], index = 0;
var X = [], Y = [];
var loaddata = [];
var istxtdata = false;
var colorScale = d3.scale.category10(); 
var label = {DEFAULT: "Un-Assign", AF: "American Foxhound", BD: "Bernedoodle", CKCP: "Cavalier King Charles Spaniel", ST: "Shih Tzu", AB: "American Bulldog"};
var positions = [label.DEFAULT, label.AF, label.BD, label.CKCP, label.ST, label.AB];
var colorMap = {"Un-Assign": "#7f7f7f", "American Foxhound": colorScale(0), "Bernedoodle": colorScale(1), "Cavalier King Charles Spaniel": colorScale(2), "Shih Tzu": colorScale(3), "American Bulldog": colorScale(4)};
var defaultColor = colorScale(5);
defaultColor = colorScale(6);
defaultColor = colorScale(7);
var positionDescriptions1 = {"Un-Assign": "un-assign a point", "American Foxhound": "usually the smallest and quickest players", "Bernedoodle": "typically of small-medium size and stature", "Bernedoodle": "typically of medium size and stature", "Shih Tzu": "typically of medium-large size and stature", "American Bulldog": "typically the largest players on the team"};
var positionDescriptions2 = {"Un-Assign": "un-assign a point", "American Foxhound": "skilled at passing and dribbling; primarily responsible for distributing the ball to other players resulting in many assists", "Bernedoodle": "typically attempts many shots, especially long-ranged shots", "Bernedoodle": "typically a strong defender with lots of steals", "Shih Tzu": "typically spends most time near the basket, resulting in lots of rebounds", "American Bulldog": "responsible for protecting the basket, resulting in lots of blocks"};
var positionDescriptionsDemo = {"Un-Assign": "un-assign a point", "American Foxhound": "responsible for controlling the ball", "Bernedoodle": "guards the opponent's best perimeter player on defense", "Bernedoodle": "typically makes many rebounds", "Shih Tzu": "typically some of the physically strongest players on the team", "American Bulldog": "typically relied on for both strong offense and defense"};
var positionDescriptions;// = positionDescriptions1;
var activePosition = "none";
var playerPositionMap = {};
var helpMouseoverStart = 0; 
var helpMouseoverEnd = 0; 

//Gets called when the page is loaded.
function init(){
    defaultX = $("#initX :selected").text();
    defaultY = $("#initY :selected").text();
    $("#area1").show();
    $("#area2").show();
    $("#area3").show();
    $("#dialog").hide();
    loadData();
}
function loadData() {
    // Get input data
    d3.csv('data/dog_indiv_100.csv', function(data) { // demo50 dataset
        var loaddata = jQuery.extend(true, [], data);
        for (var i = 0; i < loaddata.length; i++) {
            loaddata[i]["id"] = "Dog " + loaddata[i]["id"];
            // delete loaddata[i]["Player"];
            // delete loaddata[i]["Player Anonymized"];
            // delete loaddata[i]["Position"];
            // delete loaddata[i]["Team"];
            delete loaddata[i]["id"];
            delete loaddata[i]["breed"];
            playerPositionMap[loaddata[i]["Name"]] = "none";
            loaddata[i]["coord"] = {};
        }
        attr = Object.keys(loaddata[0]);
        attr.pop(); // remove "coord" from attribute list
        attr.pop(); // remove "Name" from attribute list
        attrNo = attr.length;

        // set default user labels
        loaddata.forEach(function(d) {
            d["coord"]["userlabel"] = label.DEFAULT;
        });

        for (var i = 0; i<attrNo; i++) {
            if (attr[i] != "Name" && attr[i] != "coord") {
                var tmpmax = d3.max(loaddata, function(d) { return +d[attr[i]]; });
                var tmpmin = d3.min(loaddata, function(d) { return +d[attr[i]]; });

                // jitter the value by adding a random number up to +/- 3% of scale
                function jitter(val, attribute) {
                    var mult = 0.03;
                    if (attribute == "Height (Inches)") mult = 0.02;
                    if (attribute == "Weight (Pounds)") mult = 0.01;
                    var noise = Math.random() * mult * (tmpmax - tmpmin);

                    // determine whether to add or subtract
                    var sign = Math.round(Math.random());
                    if (sign == 0) return val - noise;
                    else return val + noise;
                }

                loaddata.forEach(function(d) {
                    d["coord"][attr[i]] = jitter(+d[attr[i]], attr[i]);// jitter((+d[attr[i]]-tmpmin)/(tmpmax-tmpmin), attr[i]);
                });
            }
        }

        // determine which condition the user follows and which set of descriptions should be used
        if (window.localStorage.getItem("whichCondition") == 1) positionDescriptions = positionDescriptions1; 
        else positionDescriptions = positionDescriptions2;
        //positionDescriptions = positionDescriptionsDemo;

        // initialize log entries
        LE.init('d734dbc2-5ff8-4a4f-b44f-23faa889cbfa');
        console.log("log entries initialized");

        // initialize IAL
        ial.init(loaddata, 0, ["coord", "Name"], "exclude", -1, 1);
        console.log("ial initialized");

        console.log(loaddata);
        // load the vis
        loadVis(loaddata);
    });
}

//Main function
function loadVis(data) {
    drawScatterPlot(data);
    //updateBias(true);

    for (var i = 0; i<attrNo; i++) {
        dims[i] = attr[i];
    }
    drawParaCoords(data,dims);
    tabulate(data[0], 'empty');
    addHelp();
    addClassificationControls(data);
    addCustomAxisDropDownControls();
}

function addCustomAxisDropDownControls() {
    $("#cbX").on('change', function() {
        if ($(this).val() != "Custom Axis") {
            $("#cbX option[value='Custom Axis']").remove();
        }
    });
}

function addHelp() {
    var tooltipText = '<div class="qtip-dark"><b>Task:</b> Your task is to classify all of the points in the scatterplot. Each <i>circle</i> in the scatterplot represents a <i>basketball player</i>. Color each circle according to the <i>position</i> you think the basketball player plays.';
    tooltipText += '<br><br>';
    tooltipText += '<b>Interactions:</b> <ul>';
    tooltipText += '<li><i>See Details</i> about a point by <i>Hovering</i> over it. Details will be shown in the text on the right.</li>';
    tooltipText += '<li><i>Activate a Position</i> by <i>Clicking</i> on a colored circle on the right. A text description of the position will be shown on the bottom right.</li>';
    tooltipText += '<li><i>Deactivate a Position</i> by <i>Double Clicking</i> on any colored circle on the right.</li>';
    tooltipText += '<li><i>Classify a Point</i> on the scatterplot by <i>Clicking</i> on it while its position is activated.</li>';
    tooltipText += '<li><i>Un-Assign a Point</i> on the scatterplot by <i>Clicking</i> on it while "Un-Assign" is activated.</li>';
    tooltipText += '<li><i>Change the Axes</i> by <i>Selecting</i> a new variable from the drop-down on the X or Y axes.</li>';
    tooltipText += '<li><i>Define a Custom Axis</i> by <i>Dragging</i> points from the scatterplot to the bins along the X-Axis.</li>';
    tooltipText += '<li><i>Remove a Point from a Bin</i> on the X-Axis by <i>Double Clicking</i> the point inside the bin.</li>';
    tooltipText += '<li><i>Reset the X-Axis</i> to the default by <i>Clicking</i> the "Clear X" button to clear both bins and change it to the default dimension.</li>';
    tooltipText += '<li><i>Change the Weight of an Attribute</i> along the X-Axis by <i>Dragging</i> the bars to manually change the weight.</li>';
    tooltipText += '</ul>';
    tooltipText += '<br>';
    tooltipText += 'Try to classify all points in the scatterplot to complete the study. When ready to continue, check the box in bottom right and press <span class="studyBlue">Continue</span> to proceed to the next phase of the study.';
    tooltipText += '</div>';
    $("#helpButton").qtip({
        content: {
            title: 'Help:',
            text: tooltipText
        }, 
        style: {
            width: 500,
            classes: 'qtip-dark'
        }
    });
    d3.select("#helpButton").on("mouseover", function() {
            helpMouseoverStart = new Date();
        }).on("mouseout", function() {
            helpMouseoverEnd = new Date();
            // units are seconds -- mouseover time will always encapsulate drag time as well
            var elapsedTime = (helpMouseoverEnd - helpMouseoverStart) / 1000;

            // get the x,y coordinates of all the points on the graph to log
            var data_locations = [];
            d3.select("#SC").selectAll("circle").each(function(d) {
              var pt_log = { player: d.Name, x: d.x, y: d.y, cx: +this.getAttribute("cx"), cy: +this.getAttribute("cy") };
              data_locations.push(pt_log);
            });

            ial.logging.log('help', undefined, 'HelpHover', {'level': 'INFO', 'eventType': 'help_hover', 'elapsedTime': elapsedTime, 'userId': window.localStorage.getItem("userId"), 'whichCondition': window.localStorage.getItem("whichCondition"), 'data_locations': data_locations});
            LE.log(JSON.stringify(ial.logging.peek()));
        });
}

function addClassificationControls(data) {
    var svgClassContainer = d3.select("#datapanel2")
        .append("svg")
        .attr("width", 150)
        .attr("height", 160);
    var categoryGroups = svgClassContainer.selectAll("circle")
        .data(positions)
        .enter().append("g")
        .attr("transform", function(d, i) { return "translate(30, " + (24*(i+1)) + ")"; })
        .on("click", function(d) {
            activePosition = d;
            d3.selectAll(".category").classed("categoryClicked", false);
            d3.select(this).select("circle").cla

Answer 1

等待大神答复