Meteor and D3: d3.event is null



我是流星和D3的初学者,目前我正在尝试让m.Bostock的一个例子(适用于英国和欧洲的地图)发挥作用。http://bl.ocks.org/mbostock/9656675创建显示地图非常有效,但当单击或尝试缩放时,会出现以下错误:点击或缩放后出现错误,d3.event为空

令人惊讶的是,当使用http服务器(http server-p8008&)启动此示例时,一切都如预期的那样工作。

我知道d3在完成事件后删除了事件变量(d3.event在debounced函数中为null),但我不知道这是否也会导致Meteor中的这种行为(以及如何在这里解决它)有人能给我一个提示吗,为什么d3.event在Meteor中总是为null,以及如何处理这个问题?

我正在使用以下Meteor软件包:

meteor add d3js:d3
meteor add garrilla:topojson

这是我的HTML:

<head>
	<title>Map</title>
</head>
<body>
	<header>
		<h1 id="header-title">Title</h1>
	</header>
	<div id="vis-and-sidebar">
		<div id="vis"></div>
		<div id="sidebar"></div>
	</div>
	<div id="fixed-footer"></div>
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script>
	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>

使用D3包以及使用脚本标记引用D3导致了此问题。删除脚本标记时,每个事件对象都包含期望的值。

最新更新