使用for循环与D3绘制多个svg

时间:2019-02-27 03:58:04

标签: javascript d3.js svg

我正在使用数据集通过D3绘制图表。

但是我在处理数据时遇到一些问题,一旦解决此问题的方法是使用for循环绘制图表。

这是我的代码:

数据:

[
    var data = [

        {
            "id":100457,
            "name":"CHEUNG SIU MING",
            "collect_date": "2019-01-02 17:23:00",
            "movement":[
                {
                    "hospital":"CMC",
                    "case":"HN100000099",
                    "ward":"S15",
                    "bed":"56",
                    "start":"2019-01-01 18:45:00",
                    "end":""
                }
            ]
        },
        {
            "id":101369,
            "name":"MA CHING",
            "collect_date": "2019-01-03 09:51:00",
            "movement":[
                {
                    "hospital":"CMC",
                    "case":"HN100000133",
                    "ward":"S13",
                    "bed":"1",
                    "start":"2019-01-01 12:00:00",
                    "end":"2019-01-01 20:23:00"
                },
                {
                    "hospital":"CMC",
                    "case":"HN100000134",
                    "ward":"S13",
                    "bed":"6",
                    "start":"2019-01-02 07:34:00",
                    "end":"2019-01-02 19:13:00"
                },
                {
                    "hospital":"CMC",
                    "case":"HN100000134",
                    "ward":"S15",
                    "bed":"11",
                    "start":"2019-01-02 19:13:00",
                    "end":""
                }
            ]
        }
    ];

打印条形图代码:

for (var n=0; n< data.length;n++){
     svg.selectAll("rect")
          .data(data[n].movement)
          .enter()
          .append("rect")
          .attr("x",function(d,i){
                return linear((new Date(d.start) - starttime)/cal_hour);
          })
          .attr("y",function(d,i){
                return yScale(i);
          })
          .attr("width",function(d){
             if (d.end =="")
                return linear((endtime-new Date(d.start))/cal_hour);
              else
                return linear((new Date(d.end)-new Date(d.start))/cal_hour);
          })
          .attr("height",rectHeight-2)
          .attr("fill",function(d){return ordinal(d.ward)});
     }

MY代码是有效的,但它仅打印第一个数据集,这意味着仅运行数据[0] .movement部分。问题是什么?我尝试使用console.log进行检查,for循环成功运行了2次。

0 个答案:

没有答案