d3 не определен - ReferenceError

Question

Я пытаюсь использовать «фантазии граф» найден на http://bl.ocks.org/kerryrodden/7090426:

То, как я сделал это, чтобы загрузить код и просто отредактировать файл CSV чтобы соответствовать моим данным. Затем я просто открываю .html-файл в Firefox, чтобы увидеть интерактивный график. Однако, используя его на другом компьютере, я получаю следующие ошибки:

ReferenceError: d3 не определен sequences.js: 25

ReferenceError: d3 не определен index.html: 28

В I почти не знают о d3 или javascript, я немного потерялся. Может ли кто-нибудь из вас дать мне подсказку о том, что вызывает ошибки, и как я должен исправить код?

Я сделал один изменение в коде делает его следующее:

Javascript:

// Dimensions of sunburst. 
var width = 750; 
var height = 600; 
var radius = Math.min(width, height)/2; 

// Breadcrumb dimensions: width, height, spacing, width of tip/tail. 
var b = { 
    w: 75, h: 30, s: 3, t: 10 
}; 

// Mapping of step names to colors. 
var colors = { 
    "G0": "#5687d1", 
    "G1": "#5c7b61", 
    "G2": "#de783b", 
    "G3": "#6ab975", 
    "G4": "#a173d1", 
    "G5": "#72d1a1", 
    "Afgang": "#615c7b" 
}; 

// Total size of all segments; we set this later, after loading the data. 
var totalSize = 0; 

var vis = d3.select("#chart").append("svg:svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("svg:g") 
    .attr("id", "container") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

var partition = d3.layout.partition() 
    .size([2 * Math.PI, radius * radius]) 
    .value(function(d) { return d.size; }); 

var arc = d3.svg.arc() 
    .startAngle(function(d) { return d.x; }) 
    .endAngle(function(d) { return d.x + d.dx; }) 
    .innerRadius(function(d) { return Math.sqrt(d.y); }) 
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); }); 

// Use d3.text and d3.csv.parseRows so that we do not need to have a header 
// row, and can receive the csv as an array of arrays. 
d3.text("sequences.csv", function(text) { 
    var csv = d3.csv.parseRows(text); 
    var json = buildHierarchy(csv); 
    createVisualization(json); 
}); 

// Main function to draw and set up the visualization, once we have the data. 
function createVisualization(json) { 

    // Basic setup of page elements. 
    initializeBreadcrumbTrail(); 
    drawLegend(); 
    d3.select("#togglelegend").on("click", toggleLegend); 

    // Bounding circle underneath the sunburst, to make it easier to detect 
    // when the mouse leaves the parent g. 
    vis.append("svg:circle") 
     .attr("r", radius) 
     .style("opacity", 0); 

    // For efficiency, filter nodes to keep only those large enough to see. 
    var nodes = partition.nodes(json) 
     .filter(function(d) { 
     return (d.dx > 0.005); // 0.005 radians = 0.29 degrees 
     }); 

    nodes = nodes.filter(function(d) { 
     return (d.name != "end"); // BJF: Do not show the "end" markings. 
     }); 


    var path = vis.data([json]).selectAll("path") 
     .data(nodes) 
     .enter().append("svg:path") 
     .attr("display", function(d) { return d.depth ? null : "none"; }) 
     .attr("d", arc) 
     .attr("fill-rule", "evenodd") 
     .style("fill", function(d) { return colors[d.name]; }) 
     .style("opacity", 1) 
     .on("mouseover", mouseover); 

    // Add the mouseleave handler to the bounding circle. 
    d3.select("#container").on("mouseleave", mouseleave); 

    // Get total size of the tree = value of root node from partition. 
    totalSize = path.node().__data__.value; 
}; 

// Fade all but the current sequence, and show it in the breadcrumb trail. 
function mouseover(d) { 

    var percentage = (100 * d.value/totalSize).toPrecision(3); 
    var percentageString = percentage + "%"; 
    if (percentage < 0.1) { 
    percentageString = "< 0.1%"; 
    } 

    d3.select("#percentage") 
     .text(percentageString); 

    d3.select("#explanation") 
     .style("visibility", ""); 

    var sequenceArray = getAncestors(d); 
    updateBreadcrumbs(sequenceArray, percentageString); 

    // Fade all the segments. 
    d3.selectAll("path") 
     .style("opacity", 0.3); 

    // Then highlight only those that are an ancestor of the current segment. 
    vis.selectAll("path") 
     .filter(function(node) { 
       return (sequenceArray.indexOf(node) >= 0); 
       }) 
     .style("opacity", 1); 
} 

// Restore everything to full opacity when moving off the visualization. 
function mouseleave(d) { 

    // Hide the breadcrumb trail 
    d3.select("#trail") 
     .style("visibility", "hidden"); 

    // Deactivate all segments during transition. 
    d3.selectAll("path").on("mouseover", null); 

    // Transition each segment to full opacity and then reactivate it. 
    d3.selectAll("path") 
     .transition() 
     .duration(1000) 
     .style("opacity", 1) 
     .each("end", function() { 
       d3.select(this).on("mouseover", mouseover); 
      }); 


    d3.select("#explanation") 
     .transition() 
     .duration(1000) 
     .style("visibility", "hidden"); 
} 

// Given a node in a partition layout, return an array of all of its ancestor 
// nodes, highest first, but excluding the root. 
function getAncestors(node) { 
    var path = []; 
    var current = node; 
    while (current.parent) { 
    path.unshift(current); 
    current = current.parent; 
    } 
    return path; 
} 

function initializeBreadcrumbTrail() { 
    // Add the svg area. 
    var trail = d3.select("#sequence").append("svg:svg") 
     .attr("width", width) 
     .attr("height", 50) 
     .attr("id", "trail"); 
    // Add the label at the end, for the percentage. 
    trail.append("svg:text") 
    .attr("id", "endlabel") 
    .style("fill", "#000"); 
} 

// Generate a string that describes the points of a breadcrumb polygon. 
function breadcrumbPoints(d, i) { 
    var points = []; 
    points.push("0,0"); 
    points.push(b.w + ",0"); 
    points.push(b.w + b.t + "," + (b.h/2)); 
    points.push(b.w + "," + b.h); 
    points.push("0," + b.h); 
    if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex. 
    points.push(b.t + "," + (b.h/2)); 
    } 
    return points.join(" "); 
} 

// Update the breadcrumb trail to show the current sequence and percentage. 
function updateBreadcrumbs(nodeArray, percentageString) { 

    // Data join; key function combines name and depth (= position in sequence). 
    var g = d3.select("#trail") 
     .selectAll("g") 
     .data(nodeArray, function(d) { return d.name + d.depth; }); 

    // Add breadcrumb and label for entering nodes. 
    var entering = g.enter().append("svg:g"); 

    entering.append("svg:polygon") 
     .attr("points", breadcrumbPoints) 
     .style("fill", function(d) { return colors[d.name]; }); 

    entering.append("svg:text") 
     .attr("x", (b.w + b.t)/2) 
     .attr("y", b.h/2) 
     .attr("dy", "0.35em") 
     .attr("text-anchor", "middle") 
     .text(function(d) { return d.name; }); 

    // Set position for entering and updating nodes. 
    g.attr("transform", function(d, i) { 
    return "translate(" + i * (b.w + b.s) + ", 0)"; 
    }); 

    // Remove exiting nodes. 
    g.exit().remove(); 

    // Now move and update the percentage at the end. 
    d3.select("#trail").select("#endlabel") 
     .attr("x", (nodeArray.length + 0.5) * (b.w + b.s)) 
     .attr("y", b.h/2) 
     .attr("dy", "0.35em") 
     .attr("text-anchor", "middle") 
     .text(percentageString); 

    // Make the breadcrumb trail visible, if it's hidden. 
    d3.select("#trail") 
     .style("visibility", ""); 

} 

function drawLegend() { 

    // Dimensions of legend item: width, height, spacing, radius of rounded rect. 
    var li = { 
    w: 75, h: 30, s: 3, r: 3 
    }; 

    var legend = d3.select("#legend").append("svg:svg") 
     .attr("width", li.w) 
     .attr("height", d3.keys(colors).length * (li.h + li.s)); 

    var g = legend.selectAll("g") 
     .data(d3.entries(colors)) 
     .enter().append("svg:g") 
     .attr("transform", function(d, i) { 
       return "translate(0," + i * (li.h + li.s) + ")"; 
      }); 

    g.append("svg:rect") 
     .attr("rx", li.r) 
     .attr("ry", li.r) 
     .attr("width", li.w) 
     .attr("height", li.h) 
     .style("fill", function(d) { return d.value; }); 

    g.append("svg:text") 
     .attr("x", li.w/2) 
     .attr("y", li.h/2) 
     .attr("dy", "0.35em") 
     .attr("text-anchor", "middle") 
     .text(function(d) { return d.key; }); 
} 

function toggleLegend() { 
    var legend = d3.select("#legend"); 
    if (legend.style("visibility") == "hidden") { 
    legend.style("visibility", ""); 
    } else { 
    legend.style("visibility", "hidden"); 
    } 
} 

// Take a 2-column CSV and transform it into a hierarchical structure suitable 
// for a partition layout. The first column is a sequence of step names, from 
// root to leaf, separated by hyphens. The second column is a count of how 
// often that sequence occurred. 
function buildHierarchy(csv) { 
    var root = {"name": "root", "children": []}; 
    for (var i = 0; i < csv.length; i++) { 
    var sequence = csv[i][0]; 
    var size = +csv[i][1]; 
    if (isNaN(size)) { // e.g. if this is a header row 
     continue; 
    } 
    var parts = sequence.split("-"); 
    var currentNode = root; 
    for (var j = 0; j < parts.length; j++) { 
     var children = currentNode["children"]; 
     var nodeName = parts[j]; 
     var childNode; 
     if (j + 1 < parts.length) { 
    // Not yet at the end of the sequence; move down the tree. 
    var foundChild = false; 
    for (var k = 0; k < children.length; k++) { 
     if (children[k]["name"] == nodeName) { 
     childNode = children[k]; 
     foundChild = true; 
     break; 
     } 
    } 
    // If we don't already have a child node for this branch, create it. 
    if (!foundChild) { 
     childNode = {"name": nodeName, "children": []}; 
     children.push(childNode); 
    } 
    currentNode = childNode; 
     } else { 
    // Reached the end of the sequence; create a leaf node. 
    childNode = {"name": nodeName, "size": size}; 
    children.push(childNode); 
     } 
    } 
    } 
    return root; 
}; 

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Flow for G1 customers</title> 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <link rel="stylesheet" type="text/css" 
     href="https://fonts.googleapis.com/css?family=Open+Sans:400,600"> 
    <link rel="stylesheet" type="text/css" href="sequences.css"/> 
    </head> 
    <body> 
    <div id="main"> 
     <div id="sequence"></div> 
     <div id="chart"> 
     <div id="explanation" style="visibility: hidden;"> 
      <span id="percentage"></span><br/> 
      of G1 customers follow this flow. 
     </div> 
     </div> 
    </div> 
    <div id="sidebar"> 
     <input type="checkbox" id="togglelegend"> Legend<br/> 
     <div id="legend" style="visibility: hidden;"></div> 
    </div> 
    <script type="text/javascript" src="sequences.js"></script> 
    <script type="text/javascript"> 
     // Hack to make this example display correctly in an iframe on bl.ocks.org 
     d3.select(self.frameElement).style("height", "700px"); 
    </script> 
    </body> 
</html> 

Answer 1

Там могут быть ограничения по безопасности которые не позволяют браузеру загружать сценарий D3. Что вы можете сделать, так это загрузить сценарии, поместить их в ту же папку, что и ваши файлы, и изменить ссылки, указанные в вашем источнике.

Answer 2

в случае, если браузер не предотвращает загрузку и получение ошибки, d3.js следует разместить перед jquery.

Answer 3

Вам также может понадобиться добавить:

<meta charset="utf-8"> 

или

<meta content="utf-8" http-equiv="encoding"> 

к головной секции

Answer 4

я должен был сделать grunt build, чтобы избавиться от этой ошибки. (Использование YEOMAN и ember.js.)

Answer 5

< Заменить мета кодовую = "ISO-8859-1" > с < мета кодировкой = "UTF-8" >

Answer 6

Если бы тот же вопрос, хотя я изначально думал это из-за ограничений безопасности браузера, это не так. Он работал, когда я добавил кодовую к тэгу, как показано ниже:

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

То же самое показан на d3 документах, хотя в нем не упоминается этот вопрос конкретно: http://d3js.org/

Да, имея его также работает на местном уровне.

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

Вот полный пример:

<!doctype html> 
<html> 
<head> 
    <title>D3 tutorial</title> 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    <!--<script src="d3.min.js"></script>--> 
</head> 
<body> 
    <script> 
     var canvas = d3.select("body") 
         .append("svg") 
         .attr("width", 500) 
         .attr("height", 500); 
     var circle = canvas.append("circle") 
         .attr("cx",250) 
         .attr("cy", 250) 
         .attr("r", 50) 
         .attr("fill", "red"); 
    </script> 
</body> 
</html> 

Answer 7

Если вы используете Visual Studio вы можете перейти в меню Сервис -> Параметры -> Текстовый редактор -> JavaScript -> IntelliSense и установите флажок «Скачать удаленные ссылки ". Это сделало трюк для меня.

Answer 8

ОБНОВЛЕНИЕ: теперь есть d3-webpack-loader package, что позволяет легко загрузить d3 в webpack. Я не создатель пакета, я использовал его только для того, чтобы увидеть, работает ли он. Вот краткий пример.

// Install the loader 
npm install --save d3-webpack-loader 

// Install the d3 microservices you need 
npm install --save d3-color 
npm install --save d3-selection 

В нашем entry.js файле мы будем требовать d3 с помощью d3-webpack-loader с:

const d3 = require('d3!'); 

и затем может использовать некоторые из методов d3 с:

d3.selectAll("p").style("color", d3.color("red").darker());