Ich bin ein Anfänger mit Meteor und D3 und derzeit versuche ich, eines der Beispiele von M. Bostock (angepasst an eine Karte von Großbritannien und Europa) zu arbeiten. http://bl.ocks.org/mbostock/9656675 anlegen zeigen die Karte perfekt funktioniert, aber wenn klicken oder versuchen, um es zu vergrößern folgende Fehler auftreten: Errors after click or zoom, d3.event is nullMeteor und D3: d3.event ist null
Überraschenderweise alles funktioniert wie erwartet, wenn dieses Beispiel beginnend mit http-Server (http-Server -p 8008 &).
Ich weiß, dass d3 die Ereignisvariable nach Abschluss des Ereignisses entfernt (d3.event is null inside of debounced function), aber ich weiß nicht, ob dies auch dieses Verhalten in Meteor verursachen könnte (und wie man es hier löst) Kann mir jemand einen Hinweis geben , warum ist d3.event innerhalb von Meteor immer null und wie wird mit diesem Problem umgegangen?
Ich verwende folgende Meteor Pakete:
meteor add d3js:d3
meteor add garrilla:topojson
Hier ist mein HTML:
<head>
\t <title>Map</title>
</head>
<body>
\t <header>
\t \t <h1 id="header-title">Title</h1>
\t </header>
\t <div id="vis-and-sidebar">
\t \t <div id="vis"></div>
\t \t <div id="sidebar"></div>
\t </div>
\t <div id="fixed-footer"></div>
\t <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
\t <script src="//d3js.org/topojson.v1.min.js"></script>
\t <script>
\t var visElem = d3.select("#vis");
var width = visElem.node().getBoundingClientRect().width,
height = visElem.node().getBoundingClientRect().height,
active = d3.select(null);
var projection = d3.geo.mercator()
.scale(550)
.translate([270, 1010]);
var zoom = d3.behavior.zoom()
.translate([0, 0])
.scale(1)
.scaleExtent([1, 8])
.on("zoom", zoomed);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("#vis").append("svg")
.attr("width", width)
.attr("height", height)
.on("click", stopped, true);
console.log("SVG-Objekt zum Zeichnen:");
console.log(svg);
svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height)
.on("click", reset);
var g = svg.append("g");
svg
.call(zoom) // delete this line to disable free zooming
.call(zoom.event);
d3.json("europe.json", function(error, europe) {
if (error) throw error;
g.selectAll("path")
.data(topojson.feature(europe, europe.objects.subunits).features)
.enter().append("path")
.attr("d", path)
.attr("class", "feature")
.on("click", clicked);
g.append("path")
.datum(topojson.mesh(europe, europe.objects.subunits, function(a, b) { return a !== b; }))
.attr("class", "mesh")
.attr("d", path);
});
function clicked(d) {
if (active.node() === this) return reset();
active.classed("active", false);
active = d3.select(this).classed("active", true);
var bounds = path.bounds(d),
dx = bounds[1][0] - bounds[0][0],
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0])/2,
y = (bounds[0][1] + bounds[1][1])/2,
scale = Math.max(1, Math.min(8, 0.9/Math.max(dx/width, dy/height))),
translate = [width/2 - scale * x, height/2 - scale * y];
svg.transition()
.duration(750)
.call(zoom.translate(translate).scale(scale).event);
}
function reset() {
active.classed("active", false);
active = d3.select(null);
svg.transition()
.duration(750)
.call(zoom.translate([0, 0]).scale(1).event);
}
function zoomed() {
console.log(d3.event);
g.style("stroke-width", 1.5/d3.event.scale + "px");
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
// If the drag behavior prevents the default click,
// also stop propagation so we don’t click-to-zoom.
function stopped() {
if (d3.event.defaultPrevented) d3.event.stopPropagation();
}
</script>
</body>