Javascript函数排序

Javascript Function Ordering

本文关键字：排序 函数 Javascript      更新时间：2023-09-26

我有一个关于javascript函数如何在HTML中执行的基本问题。我正在用dipple.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>

我假设页面和图形将完全加载到我将调试器语句放在底部的位置，因为这是最后一行代码。但是，当页面暂停在那里时，实际上并没有创建图形。在调试器行之后，页面将运行酒窝库中的一组函数来创建svg图。显然，后面的jQuery行不起作用，因为还没有可选择的元素。

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

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

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

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

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

相关文章：