仅在调用 renderlet 函数后显示 DC 条形图，而不是在渲染时显示。

Question

我正在使用 attr 修改栏的大小和位置。但是，图表属性仅在图表呈现后可用。

所以我正在对功能进行修改 chart.on("renderlet.somename",函数(图表){//修改});

我的问题是这看起来很奇怪，因为首先呈现图表，然后应用修改，然后它全部显示在页面上。

我希望图表仅在应用修改后可见。

Answer 1

我开始写道，您可以使用 pretransition event，因为这会在一切 rendered/redrawn、转换开始之前触发。

但是您是正确的，条形宽度不可公开访问（它应该是！）并且在它们转换之前您无法从条形中读取它。

因此，正如您所建议的，您可以使用 CSS:

隐藏整个图表

<div id="test" style="visibility: hidden"></div>

然后在 renderlet 的开头显示它：

chart.on('renderlet', function(chart) {
  d3.select('div#test').style('visibility', 'visible');

要消除暂停，您还可以在初始化时禁用此图表的转换；

chart
  .transitionDuration(0)

并在您的 renderlet 中重新启用它们：

chart
  .on('renderlet', function(chart) {
    d3.select('div#test').style('visibility', 'visible');
    chart.transitionDuration(750); // default value

这是一个演示，使用 fiddle 演示误差条（也需要条宽）：http://jsfiddle.net/gordonwoodhull/cw86goxy/32/

仅在调用 renderlet 函数后显示 DC 条形图，而不是在渲染时显示。

Showing DC bar chart only after on renderlet function is called, and not on render.

dc.js