javascript - 单击展开表格行并在其中绘制 D3 图表

Question

我正在尝试创建一个表格，其中一行在点击时展开，并且在新的展开行内绘制了两个 D3 图表。

我的扩展行逻辑:-

<tbody>
  <tr ng-repeat-start="item in nodeSummary">
    <td>
      <button ng-if="item.expanded" ng-click="tableRowExpand($index,false)">-</button>
      <button ng-if="!item.expanded" ng-click="tableRowExpand($index,true)">+</button>
    </td>
    <td>{{item.a}}</td>
    <td>{{item.b}}</td>
    <td>{{item.c}}</td>
  </tr>
  <tr ng-if="item.expanded" ng-repeat-end>
    <td colspan="4" style="height:100px;width:100%;">
      <div id="expanded-tablerow-container" style="height:100%;width:100%;overflow:auto;" >
        <div id="expanded-tablerow-circleProgress" style="height:100%;width:20%;float:left;">Here</div>
        <div id="expanded-tablerow-barchart" style="height:100%;width:80%;float:left;">Here</div>
      </div>
    </td>
  </tr>
</tbody>

因此使用 ng-repeat-start/end 和按钮的 onClick 特定行被展开/缩小。

tableRowExpand 函数:-

$scope.tableRowExpand =  function(index, value){

  $scope.nodeSummary[index].expanded = value;

  if (value){
    drawCircularProgressBar(d3.select("#expanded-tablerow-circleProgress"),0.8);
    drawHorizontalBar("#expanded-tablerow-barchart",data);
  }

};

因此，在检查 value 是否为 true 时，我正在调用方法来绘制 d3 图表和条形图。但他们不是在画画。

我的问题:-

1. 好吧，我调查了这个问题，似乎问题是在文档更改完成之前调用这些方法，我怎么知道的？好吧，假设如果有两行，那么在展开第 1 行时，没有绘制任何内容，但在单击第 2 行时，条形图和图表会绘制在第 1 行的展开空间上。我能说清楚吗？那么如何解决这个问题呢？
2. 多行可以同时保持展开状态。我可能有 100 行，d3 绘图是根据每一行的数据完成的，每行都会有所不同，因此每一行在其展开 View 上都会有唯一的 d3 绘图。但是由于绘图是通过传递 div 完成的，对于所有展开的行都是相同的，这不会破坏唯一性，在所有展开的 View 上说相同的绘图吗？在某种程度上，我怎样才能为每一行绘制独特的图形？

希望我能说清楚。请帮我解决这个问题。

谢谢。

Answer 1

好吧，我终于能够解决它了。让我们开始吧。

问题1)

是的，我是对的:)问题是文档没有完全加载，我解决了添加一个简单的检查代码，

 angular.element(document).ready(function(){
    //calling the d3 draw code here
    });

问题 2)

我不知道这是否是最有效的方式，如果有人想输入，请输入，但我这样做了。

var newCircleProgressId = 'expanded-tablerow-circleProgress' + index;
var newHoizontalBarId = 'expanded-tablerow-barchart' + index;
document.getElementById("expanded-tablerow-circleProgress").setAttribute('id',newCircleProgressId);
document.getElementById("expanded-tablerow-barchart").setAttribute('id', newHoizontalBarId);

即动态更改 tableRowExpand 函数内 div 的 ID，并将此新 ID 与唯一行(使用索引提取)一起传递以绘制 d3 函数。