Question

我有d3代码生成这个svg。它是一个更大的动态图形的片段，在一个group元素中的foreignobject内的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风格似乎有效。你有没有用d3选择logoDiv？

以下代码适用于我：

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

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

此外，您应该使用xhtml命名空间作为div，因为它不是在foreignObject中推断出来的：

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

是否可以用D3动态改变div的大小？

1 个答案: