是否可以使用D3動態更改div的大小？

Question

我有產生此svg的d3代碼。 它是一個較大的動態圖的一個片段，該圖像在組元素內的異物內的div中具有圖像。

<svg>
    <g class = "node" transform = "translate(711.2977697849274,120)">
        <circle class = "cirBG" r = "70"></circle>
        <foreignobject class = "fObj" x = "-25" y = "-25" height = "50" width = "50" overflow = "visible">
           <div class = "logo"
             style = "background-image: url(imgs/ppl/gbProfile.png); height: 50px; width: 50px; background-size: 50px 50px; background-position: 0px 0px; background-repeat: no-repeat;"></div>
        </foreignobject>
    </g>  
</svg>

然后我有d3代碼來更改.logo div的大小，但沒有一個有效

var logoDiv = cNode.select( ".logo" );

// tried strict javascript //////////////////////   
logoDiv.style.width = '"' + logoWidth + 'px"';
logoDiv.style.height = '"' + logoHeight + 'px"';

// tried d3 style ////////////
logoDiv.style( "width", logoWidth  + 'px' );
logoDiv.style( "height", logoHeight  + 'px' );

我看到了一些Jquery的示例，如果它是唯一的選擇，它將使用它，但嘗試使其對現有d3庫保持簡單。 任何幫助將不勝感激

Answer 1

d3樣式似乎有效。 您logoDiv使用d3選擇了logoDiv ？

以下代碼對我有用：

var logoDiv = d3.select( ".logo" );
logoDiv.style('background-color',"blue");
logoDiv.style('height','200px')

JsFiddle： http : //jsfiddle.net/8m6kT/

另外，您可能應該為div使用xhtml命名空間，因為它不是在foreignObject中推斷出來的：

<foreignobject class = "fObj" x = "-25" y = "-25" height = "50" width = "50" overflow ="visible">
    <xhtml:div class = "logo" style = "..."></xhtml:div>
</foreignobject>