Question

我正在尝试简单地使用我的数组中的数据，目标是在执行if语句时打印该数组的索引。例如，对于第一个如果要打印索引[0] - ＆gt; 12，第二个if应该是索引[1] - ＆gt; 1等...到目前为止，所有内容都是硬编码的，并且显示我需要的内容，但我希望来自数据集。

这是完整的代码：http://plnkr.co/edit/JqACszHaWNy7mKxXl3V1?p=preview

var setTimeDeg;
var timeControl = 0;

var data = ["12", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"]; 

if (timeControl >=0 && timeControl < 30)
  {
     setTimeDeg = 0;

    clockGroup.append("text")
       .attr("x", "110")
       .attr("y", "50")
     //.data(data)
     //.enter()
       .text(function(d,i) { return i[0];  });
     //.text("12 to 1");
   } 

 else if (timeControl >=30 && timeControl < 60)
  {
     setTimeDeg = 30;

     clockGroup.append("text")
       .attr("x","110")
       .attr("y","50")
       .text("1 to 2");
     //.text(function(d,i) { return i + " to 2";  });
  }

  else if (timeControl >=60 && timeControl < 90)
  {
      setTimeDeg = 60;

     clockGroup.append("text")
      .attr("x","110")
      .attr("y","50")
      .text("2 to 3");
  }

  else if (timeControl >= 90 && timeControl < 120)
  {
      setTimeDeg = 90;

     clockGroup.append("text")
      .attr("x","110")
      .attr("y","50")
      .text("3 to 4");
  }

  else if (timeControl >= 120 && timeControl < 150)
  {
     setTimeDeg = 120;

     clockGroup.append("text")
     .attr("x","110")
     .attr("y","50")
     .text("4 to 5");
  }

  else if (timeControl >= 150 && timeControl < 180)
  {
      setTimeDeg = 150;

     clockGroup.append("text")
      .attr("x","110")
      .attr("y","50")
      .text("5 to 6");
  }

  else if (timeControl >= 180 && timeControl < 210)
  {
     setTimeDeg = 180;

     clockGroup.append("text")
       .attr("x","110")
      .attr("y","50")
      .text("6 to 7");
  }

  else if (timeControl >= 210 && timeControl < 240)
  {
      setTimeDeg = 210;

      clockGroup.append("text")
       .attr("x","110")
       .attr("y","50")
       .text("7 to 8");
  }

 else if (timeControl >= 240 && timeControl < 270)
  {
     setTimeDeg = 240;

     clockGroup.append("text")
        .attr("x","110")
        .attr("y","50")
        .text("8 to 9");
  }

 else if (timeControl >= 270 && timeControl < 300)
  {
       setTimeDeg = 270;

       clockGroup.append("text")
        .attr("x","110")
        .attr("y","50")
       .text("9 to 10");
  }

  else if (timeControl >= 300 && timeControl < 330)
  {
        setTimeDeg = 300;

          clockGroup.append("text")
              .attr("x","110")
              .attr("y","50")
              .text("10 to 11");
  }

  else if (timeControl >= 330 && timeControl < 360)
  {
         setTimeDeg = 330;

         clockGroup.append("text")
             .attr("x","110")
             .attr("y","50")
             .text("11 to 12");
  }

  else if (timeControl >= 360)
  {
      setTimeDeg = 0;
  }

   var arc = d3.svg
     .arc()
     .innerRadius(0)
     .outerRadius(radius)
     .startAngle((setTimeDeg * Math.PI) / 180)
     .endAngle(((setTimeDeg + 30) * Math.PI) / 180);

Answer 1

正如我所看到的，您只是从传入的requireAcknowledgement值中派生出两个值（数组索引和setTimeDeg）。首先使用timeControl和floor函数计算这些值：

modulo

您的var minTimeDeg = 30; var hourIndex = Math.floor((timeControl % 360) / minTimeDeg); var setTimeDeg = hourIndex * minTimeDeg;和x属性是固定的，因此唯一不同的其他数据就是文本本身。但由于其格式始终为y，因此该字符串也可以从先前计算的数组索引派生。使用索引查找此小时和下一小时，例如：

<this hour> to <next hour>

查看下一个小时时，使用“％”模运算符回绕到数组的开头 - 否则当这个小时到达结束时你会得到一个“越界”异常阵列。

现在您可以消除所有if / else条件及其样板代码。在一个常见的D3代码块中使用这些变量来构建显示...

使用d3.js将数据连接到我的代码

1 个答案: