Javascript 函数排序答案

【问题标题】：Javascript Function OrderingJavascript 函数排序
【发布时间】：2015-10-29 22:17:23
【问题描述】：

我有一个关于 javascript 函数如何在 HTML 中执行的基本问题。我正在使用 dimple.js 创建一个图表，并希望在通过 javascript 创建图表后选择一个 svg 元素。然而，即使我的 jQuery 选择器是我页面上的最后一点脚本，它也不会执行，因为实际上还没有创建凹坑图。这是我正在使用的代码：

<html>
  <head>
    <meta charset="utf-8">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
      function draw(data) {

          "use strict";
          var margin = 75,
              width = 1400 - margin,
              height = 600 - margin;

          d3.select("body")
            .append("h2")
            .text("World Cup Attendance")

          var svg = d3.select("body")
            .append("svg")
              .attr("width", width + margin)
              .attr("height", height + margin)
            .append('g')
                .attr('class','chart');

          var myChart = new dimple.chart(svg, data);
          var x = myChart.addTimeAxis("x", "year"); 
          myChart.addMeasureAxis("y", "attendance");
          x.dateParseFormat = "%Y";
          x.tickFormat = "%Y";
          x.timeInterval = 4;
          myChart.addSeries(null, dimple.plot.line);
          myChart.addSeries(null, dimple.plot.scatter);
          myChart.draw();
        };

    </script>
  </head>
<body>
  <script type="text/javascript">
  d3.tsv("world_cup.tsv", draw);
  debugger
  $('.example').doSomething();
  </script>
</body>
</html>

我假设页面和图形将在我将调试器语句放在底部的位置完全加载，因为那是最后一行代码。但是，当页面在那里暂停时，实际上并没有创建图表。在调试器行之后，页面会通过dimple 库中的一系列函数来创建svg 图。显然，紧随其后的 jQuery 行不起作用，因为还没有要选择的元素。

我认为我在 javascript 方面缺少一些基本的东西。如何让我的 jQuery 仅在酒窝完成后才运行？

【问题讨论】：

标签： javascript jquery html svg dimple.js

【解决方案1】：

您提供 draw 函数作为 CSV 请求的回调。

当draw 完成时，绘图就完成了。所以把它放在那里，或者创建一个按顺序调用它们的小匿名函数，例如，

d3.tsv("world_cup.tsv", function() {
  draw();
  $('.example').doSomething();
);

（如果 D3/Dimple 的图表 draw() 函数也是异步的，那么您需要在 that 回调中执行它，如果它有，但我不知道 Dimple。）

【讨论】：

它不是异步的，你的答案是正确的 - 除了 d3.tsv 回调需要一个数据参数，然后需要将其传递给绘图函数（示例中的那个不是凹坑绘图函数)。
谢谢！当我传入数据参数时它起作用了。对于任何偶然发现此问题的人：d3.tsv("world_cup.tsv", function(data) { draw(data); $('.example').doSomething(); });