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

我有產生這個svg的d3代碼。它是一個更大的動態圖片的片段，它在一個組元素內的一個異形對象內的一個div內具有一個圖像。是否可以使用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庫變得簡單。任何幫助將不勝感激

來源

2014-02-11 Mindgnosis

你試過調整'foreignobject'的大小嗎？ – MarcoL

@MarcoCI是的，無論如何，這是必要的，因爲div包含在裏面。它雖然沒有調整div的大小。 – Mindgnosis

d3風格似乎工作。您是否選擇了logoDiv與d3？

下面的代碼對我的作品：

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

的jsfiddle：

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

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

此外，你應該使用xhtml命名空間的股利，因爲它不是在foreignObject推斷

來源

2014-02-11 12:07:13

真棒，謝謝克里斯託弗Chiche！是的，我用D3來選擇，現在它工作。我必須有其他衝突標籤或之前發生的事情。 xhtml防止由於某種原因加載背景圖像。 – Mindgnosis

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

回答

相關問題