d3 n'est pas défini - ReferenceError
Je suis en train d'utiliser une "fantaisie graphique", à http://bl.ocks.org/kerryrodden/7090426:
La façon dont je l'ai fait c'était pour télécharger le code et il suffit d'éditer le fichier CSV pour correspondre à mes données. Ensuite, j'ai simplement ouvert le .html-fichier dans Firefox pour voir le graphique interactif. Cependant, son utilisation à un autre ordinateur, j'obtiens les erreurs suivantes:
ReferenceError: d3 n'est pas défini séquences.js:25
ReferenceError: d3 n'est pas défini index.html:28
Que je n'ai presque aucune connaissance de d3 ou javascript, je suis un peu perdu.
Qui de vous me donner un indice de ce qui est à l'origine des erreurs et comment je dois corriger le code?
J'ai fait une simple modification du code de rendre les suivantes:
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>
Pas d'autres erreurs, malheureusement. Mon autre ordinateur a un peu certains strict des paramètres de sécurité, qui pourrait causer le problème? Est-il possible d'inclure la bibliothèque par l'avoir dans le même dossier ou d'une semblable manière à ne pas être dérangé par les paramètres de sécurité?
Il est possible qu'il ne peut pas le télécharger. Vous pouvez télécharger la D3 script, mettre dans le même dossier et modifier le chemin dans votre source.
Merci, ça marche! Il semble que le travail dans Firefox, mais ce n'est pas un problème 🙂 n'hésitez pas à répondre à ma question de fermer le fil.
Va le faire, merci.
OriginalL'auteur pir | 2014-01-27
Vous devez vous connecter pour publier un commentaire.
Il peut y avoir des restrictions de sécurité qui empêchent votre navigateur de télécharger le D3 script. Ce que vous pouvez faire est de télécharger les scripts, les placer dans le même dossier que votre et modifier des fichiers référencés chemins d'accès dans votre source.
OriginalL'auteur Lars Kotthoff
Eu le même problème, mais j'ai d'abord pensé que c'est en raison de restrictions de sécurité de navigateur, qui n'était pas le cas. Il a travaillé quand j'ai ajouté le charset de la balise de script comme indiqué ci-dessous:
Le même est indiqué dans le d3 docs, bien qu'il n'évoque pas cette question: http://d3js.org/
Oui, l'avoir en local fonctionne aussi.
Ici est l'exemple complet:
Dans mon cas, je n'ai eu qu'à ajouter la "http:" qui manquait à partir de la ligne de source d'exemple, puis il a travaillé dans Firefox. Concrètement, j'ai remplacé
<script src="//d3js.org/d3.v3.min.js"></script>
avec<script src="http://d3js.org/d3.v3.min.js"></script>
Trois ans plus tard, cela a fonctionné pour moi aussi. 🙂 Cheers
OriginalL'auteur Bobz
Vous pouvez aussi avoir besoin d'ajouter:
ou
à votre chef de section
OriginalL'auteur in code veritas
dans le cas où le navigateur ne l'empêche pas de téléchargement et le problème persiste, d3.js il devrait être placé avant jquery.
OriginalL'auteur Caner Çakmak
J'ai dû faire une
grunt build
pour obtenir débarrasser de cette erreur. (À l'aide de Yeoman et Ember.js.)OriginalL'auteur hourback
Remplacer <meta charset="ISO-8859-1"> <meta charset="UTF-8">
OriginalL'auteur Mani
Si vous utilisez Visual Studio, vous pouvez allez dans Outils -> Options -> Editeur de Texte -> JavaScript> IntelliSense et cochez la case "Télécharger les références à distance". Qui a fait le tour pour moi.
OriginalL'auteur martin36
Mise à JOUR: il y a maintenant un
d3-webpack-chargeur
le paquet qui le rend facile à charger d3 dans webpack. Je ne suis pas le créateur de l'emballage, je ne l'ai utilisé pour voir si elle fonctionne. Voici un exemple rapide.Dans notre
entry.js
fichier, nous allons exigerd3
à l'aide de lad3-webpack-loader
avec:et pouvez ensuite utiliser certains des
d3
méthodes:OriginalL'auteur Brett DeWoody
Et JavaScript pour les noobs comme moi - problème peut être que vous n'avez pas l'importer correctement. Essayez de lire importer des docs et des choses comme:
import * as d3 from 'd3-transition'
OriginalL'auteur wonder.mice