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图表和条形图的方法。但他们并没有画画。

我的问题： -

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

希望我能够清楚自己。请帮我解决这个问题。

感谢。

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函数。

在点击上展开表格行并在

1 个答案: