Question

我是流星和D3的初学者，目前我正试图让M. Bostock（适应英国和欧洲的地图）的一个例子工作。 http://bl.ocks.org/mbostock/9656675 创建显示地图的效果很好，但在单击或尝试缩放时，会发生以下错误： Errors after click or zoom, d3.event is null

令人惊讶的是，当使用http-server（http-server -p 8008＆amp;）启动此示例时，一切都按预期工作。

我知道d3在完成事件后移除了事件变量（d3.event is null inside of debounced function），但我不知道这是否也会导致Meteor中的这种行为（以及如何在此处解决）任何人都可以给我一个提示，为什么d3.event在Meteor中总是空的以及如何处理这个问题？

我正在使用以下Meteor套餐：

meteor add d3js:d3
meteor add garrilla:topojson

这是我的HTML：

＆＃13;

<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>

＆＃13;

Answer 1

使用D3软件包以及使用脚本标记引用D3会导致此问题。删除script-tag时，每个事件对象都包含期望值。

Meteor和D3：d3.event为null

1 个答案: