Problem to get BoundingBox working

[jmgabriel]

Hello

I'm trying to replicate the code provided by Mike Bostock for having borders around a text.

My code based on GWT-D3 is the following (the original javascript code is introduced as comment) :

public TestDiagram()
{
//      var svg = d3.select("body").append("svg").attr("width", 960).attr("height", 500);
           Selection svg = D3.select(this).append("svg").attr("width", width).attr("height", height);         

//      var text = svg.append("text").attr("x", 480).attr("y", 250) .attr("dy", ".35em").attr("text-anchor", "middle")  .style("font", "300 128px Helvetica Neue")  .text("Hello, getBBox!");
    Selection selection = svg.append("text").attr("x", 480).attr("y", 250).attr("dy", ".35em").attr("text-anchor", "middle").style("font", "300 128px Helvetica Neue")  .text("Hello, getBBox!");

//      var bbox = text.node().getBBox();
     int textWidth = getTextWidth(selection.node());

GWT.log(">>" + textWidth); // -> return 0

//      var rect = svg.append("rect").attr("x", bbox.x).attr("y", bbox.y).attr("width", bbox.width) .attr("height", bbox.height).style("fill", "#ccc").style("fill-opacity", ".3").style("stroke", "#666").style("stroke-width", "1.5px");
    Selection rectSelection = svg.append("rect").attr("x", "10").attr("y", "100").attr("height","20").attr("width", textWidth).attr("stroke", "grey").attr("fill","red");       

}

private static final native int getTextWidth(Element e)/*-{
        $wnd.alert(" " +  e.getBBox().width); // -> display 0
return e.getBBox().width;
}-*/;

The code above works well if I set a static value for the width of the rectangle. If not, only the text appears.

The access fucntion to the BBox coordinates is similar to the one proposed in the ArcTween Demo example of the GWT-D3 project. The main difference with this example is that the value are used afterward in a transition function but I don't feel it is the cause of my problem.

Do you have an idea about what could be the problem ?

thank a lot for your help

[anthonime]

Hi,

Have you tried to defer the call to getTextWidth() using a Scheduler.DeferredCommand ? It is potentially the problem here.

[jmgabriel]

Hello,

It is THE problem ;-)

This piece of code allows to get the text positions/size once they have been set by D3 :

      Scheduler.get().scheduleDeferred(new Command()
        {
            @Override
            public void execute()
            {
                svg.append("rect")
                .attr("x", new DatumFunction<Double>()
                {
                    @Override
                    public Double apply(Element context, Value d, int index)
                    {
                        return(getBBX(context.getParentElement()));
                    }
                })
...

thank a lot for your support and reactivity also.

... and thank you for this very helpful project (!)