d3.js:对代码执行顺序的困惑

d3.js: Confusion about the order in which the code is executed

本文关键字：顺序 执行 代码 js d3      更新时间：2023-09-26

我正在尝试用D3.js制作一个交互式条形图我把所有的东西都上传到github，方便参考。我还在问题的末尾添加了index.html。

我的起点是data.json，它包含7个项目（即国家）的数组。每个国家都有一个属性"name"和其他四个属性。这些代表了2009年和2014年私人银行和国家对希腊债务的阐述。

我的目标是创建一个条形图，首先显示2009年每个国家的银行和公共部门的博览会（因此每个国家有两个条形图），一旦用户点击相应的按钮，就会更改为2014年。

我设法使一切顺利进行！然而，我不得不为我需要使用的每个（子）数据集手动创建单独的列表。例如，我创建了一个名为y2009的项目，其中包括国家1的银行和国家的说明，然后国家2也是如此，以此类推。。（我留下了其中一个列表，并在第43行评论了它）

我想让我的代码更加灵活，所以我创建了一个for循环，提取数据并为我创建列表。这不起作用，因为for循环将在实际加载数据之前启动。因此，我最终会得到空的列表。因此，我将for循环分组为一个函数（prepare（）），并在加载数据的函数中执行该函数（第18-30行）。这解决了这个问题。。。

并创建了一个新的！应该设置刻度的两个函数（见第67-73行）不起作用，因为它们的计算需要在for循环创建的一个列表上（即"总计"）。（我认为这是由于在调用缩放方法后创建的列表。）

奇怪的是，如果我运行脚本，然后在控制台中复制xScale和yScale函数，然后复制draw函数（第101-212行），一切正常。因此，我试图将所有内容分组为函数（例如setScales、draw），以便在脚本末尾（第214-215行）按我想要的顺序调用它们，但这会产生问题，因为某些变量（例如xScale和yScale）需要是全局的。我还尝试先在全局空间中创建它们，然后通过setScales修改它们。这也不起作用。

总结一下，等等，我不明白是：

  • 我应该按照哪个顺序编写代码以使事情（再次）正常工作？将操作包装在函数中（例如设置比例、绘制条和标签），然后按正确的顺序调用函数，这是一个好主意吗？

  • 使用比例方法创建哪种类型的对象？我对它们是否是实际功能感到困惑。

我希望这本书读起来不会太痛苦，并感谢所有度过难关的人！

Fede

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3.min.js"></script>
</head>
<body>
<p>Introductory text here!</p>
<p>
<button id="change2009"> 2009 </button>
<button id="change2014"> 2014 </button>
</p>
<div id="country"></div>
<script type="text/javascript">
d3.json("data.json", function(error, json) {
    if (error) {
        console.log(error);
    } else{
    console.log(json);
    dataset=json;
    }
prepare (dataset);
});
//load data
var dataset;
var bank09=[];
var state09=[];
var bank14=[];
var state14=[];
var y2009=[];
var y2014=[];
var total=[];
var xScale;
var yScale;
//var total = [4.76, 0, 0.12, 6.36, 4.21, 0, 0.04, 7.96, 78.82, 0, 1.81, 46.56, 45, 0, 13.51, 61.74, 6.86, 0, 1.06, 40.87, 12.21, 0, 1.22, 13.06, 1.21, 0, 0.39, 27.35];

function prepare (dataset){
    for (i in dataset) {bank09.push(dataset[i].bank09);
    state09.push(dataset[i].state09);
    bank14.push(dataset[i].bank14);
    state14.push(dataset[i].state14);
    y2009.push(dataset[i].bank09);
    y2009.push(dataset[i].state09);
    y2014.push(dataset[i].bank14);
    y2014.push(dataset[i].state14); 
    total.push(dataset[i].bank09);
    total.push(dataset[i].state09);
    total.push(dataset[i].bank14);
    total.push(dataset[i].state14);
    }
}
//overwrite dataset
dataset2=y2009;
//scales
function setScales () {
    var xScale = d3.scale.ordinal()
              .domain(d3.range(total.length/2))
              .rangeRoundBands([0, w], 0.1);
    var yScale = d3.scale.linear()
              .domain([0, d3.max(total)])
              .range([0, h]);
    console.log(yScale(89));
}
//layout
var w = 600;
var h = 600;
var barPadding = 1;
//coountry names
var country = ["Austria", "Belgium", "France", "Germany", "Italy", "Holland", "Spain"];
d3.select("#country")
    .data(country)
    .enter()
    .append("rect")
    .attr("class", "country")
    //.append("text")
    //.text(function(d){
    //    return d;
    //  })

//draw svg
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
function draw () {
//draw bars
svg.selectAll("rect")
  .data(dataset2)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
        return xScale(i);
    })
    .attr("y", function(d){
        return h - yScale(d);
    })
    .attr("width", xScale.rangeBand)
    .attr("height", function(d) {
    return yScale(d);
    })
    .attr("fill", "black");

//add labels
svg.selectAll("text")
    .data(dataset2)
    .enter()
      .append("text")
      .text(function(d){
                return d;
            })
      .attr("text-anchor", "middle")
      .attr("font-family", "sans-serif")
      .attr("font-size", "12px")
      .attr("fill", "red")
      .attr("x", function(d, i){
         return xScale(i) + xScale.rangeBand() / 2;
         })
      .attr("y", function(d) {
     if (d<3) {
       return h - 15;
       } else {
         return h - yScale(d) + 15;}
         })

  //interactivity
  d3.select("#change2014")
    .on("click", function() {
    //update data
    dataset2=y2014;
    //update bars
    svg.selectAll("rect")
       .data(dataset2)
       .transition()
       .duration(3000)
       .attr("y", function(d){
       return h - yScale(d);
       })
       .attr("height", function(d) {
       return yScale(d);
       })        
    //update labels
    svg.selectAll("text")
      .data(dataset2)
      .transition()
      .duration(3000)          
      .text(function(d){
        return d;
      })
      .attr("x", function(d, i){
        return xScale(i) + xScale.rangeBand() / 2;
      })
      .attr("y", function(d) {
        if (d<3) {
          return h - 15;
        } else {
          return h - yScale(d) + 15;}
      })
    })

  d3.select("#change2009")
    .on("click", function() {
    //update data
    dataset2=y2009;
    //update bars
    svg.selectAll("rect")
       .data(dataset2)
       .transition()
       .duration(3000)           
       .attr("y", function(d){
       return h - yScale(d);
       })
       .attr("height", function(d) {
       return yScale(d);
       })
    //update labels
    svg.selectAll("text")
      .data(dataset2)
      .transition()
      .duration(3000)          
      .text(function(d){
        return d;
      })
      .attr("x", function(d, i){
        return xScale(i) + xScale.rangeBand() / 2;
      })
      .attr("y", function(d) {
        if (d<3) {
          return h - 15;
        } else {
          return h - yScale(d) + 15;}
      })
    })
}
setScales ();
draw();
</script>

我应该按照哪个顺序编写代码以使事情（再次）正常工作？是最好将操作封装在函数中（例如，设置比例、绘图条和标签），然后在正确的顺序？

正如Lars所指出的，您可以将所有内容都放在d3.json回调中。这是因为您只想在获得数据后使用D3开始渲染。d3.json方法是异步的，这意味着在调用d3.json（）之后，代码将在d3.json内部的函数完成之前首先执行。退房http://rowanmanning.com/posts/javascript-for-beginners-async/有关Javascript中异步行为的更多信息。

假设您只想在d3.json方法完成后开始渲染，您也可以将代码的其他部分组织成更小的函数，并从d3.json成功回调中调用某种初始化器函数，有点像您正在使用prepare函数。这是一种更干净的方法，并开始将您带向模型视图范式。

使用比例方法创建哪种类型的对象？我很困惑关于它们是否是实际功能。

scale方法确实返回了一个函数，但在其原型中添加了其他函数。试着打印出"someScale.prototype"，看看你可以使用的各种方法。我也强烈推荐Scott Murray的D3教程。以下是关于天平的章节：http://alignedleft.com/tutorials/d3/scales

相关文章：