Elements not fully initialized at binding time

[oniseijin]

The width and height of a DIV is unavailable at initial binding time. This may be a timing issue with how bindings work, but it makes the following code not work within an init:

d3.select(element).style("width") -> NAN, does not pick up style
d3.select(element).node().getBoundingClientRect().width -> this is 0, but should be set to what the css sets it to, or what the page has/will render. Perhaps this is purely a drawback of Knockoutjs.

Based off an attempt to reuse the bindings at https://github.com/teodoran/d3-knockout-demo

Code snippit

ko.bindingHandlers.barChart = {
    init: function(element, valueAccessor, allBindings, data, context) {
        "use strict";
         var elementWidth = d3.select(element).node().getBoundingClientRect().width // will be 0
         var elementWidth = parseInt(d3.select(element).style("width"), 10) // will be NAN
        }
}

Template

<div id="kendoui.d3bar.view-template">
    <div class="row">
        <div class="col-md-12 bigChart" data-bind="barChart: barChartData, style: {width: '500px' , height: '500px' }"></div>
    </div>
</div>
<!-- bigChart sets the height/the class col-md-12 setting the width, but being completely ignored -->

So, I had to hack using some arbitrary observable value, but this is an untenable work around

[dchambers]

Ah, interesting, like #1372 this will also be caused by the template element not being added to the page at the the point we invoke ko.applyBindings(), but this time the code isn't doing anything unreasonable (like adding click listeners to global page elements). For components themselves there is a separate call-back when the element becomes attached to the page, but for knockout plug-ins we are initializing these before that event.

Let me take a proper look at this, and see what can be done...

[oniseijin]

@dchambers Thanks: #1374 may be more of the same (and the most important, as I think the C3 library, based off D3 would be an extremely valuable addition). It is likely suffering from the ordering of initialization as well.

Strange enough though, I got http://processingjs.org working within a workbench, which opens a lot of interesting possibilities, and I thought it would be much more intrusive than d3.

[andy-berry-dev]

This is fixed by #1379 which will be in the BRJS 1.0 release.