D3.js SVG的bBox为零_D3.js_Svg - Fatal编程技术网

D3.js SVG的bBox为零

d3.js svg

D3.js SVG的bBox为零,d3.js,svg,D3.js,Svg,为什么bBox.width，bBox.height的结果都是0？我希望它们都是500px，如何校正 <!DOCTYPE html> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script> <!--script src="https://cdnjs.cloudflare.com/ajax/libs/d3/

为什么

bBox.width

，

bBox.height

的结果都是0？我希望它们都是500px，如何校正

<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.js" type="text/JavaScript"></script-->
<style>
    rect {
        stroke: #9A8B7A;
        stroke-width: 1px;
        fill: #CF7D1C;

    }

    svg{
        width: 500px;
        height: 500px;
        background:blue;
    }
</style>
<body>


</body>
<script>

    var svg = d3.select("body").append("svg");
    var bBox = svg.node().getBBox();
    console.log(bBox.width + 'x' + bBox.height);






</script>


直肠{
行程：9A8B7A；
笔画宽度：1px；
填充：#CF7D1C；
}
svg{
宽度：500px；
高度：500px；
背景：蓝色；
}
var svg=d3.选择（“主体”）.追加（“svg”）；
var bBox=svg.node（）.getBBox（）；
控制台日志（bBox.width+x+bBox.height）；

尝试

getBoundingClientRect

而不是

getBBox

尝试

getBoundingClientRect

而不是

getBBox
在SVG中放置一个元素（一个矩形、一个圆、一条线等，没关系），你会看到一些非常有趣的东西…@GerardoFurtado谢谢，但实际上没有什么变化，getBoundingClientRect
工作它确实改变了，很容易证明：@GerardoFurtado谢谢！但是如果我把svg.append（“rect”）.attr（“width”，100）.attr（“height”，100），它显示100 x100，而不是500 x 500。我从来没有说过它会显示SVG大小。我说会发生“非常有趣的事情”。基于此，您可以开始思考getBBox
是如何工作的…在SVG中放置一个元素（一个矩形、一个圆、一条线等，这无关紧要），您将看到一些非常有趣的东西…@GerardoFurtado谢谢，但实际上没有什么变化，getBoundingClientRect
工作它确实会改变，很容易证明：@GerardoFurtado谢谢！但是如果我把svg.append（“rect”）.attr（“width”，100）.attr（“height”，100），它显示100 x100，而不是500 x 500。我从来没有说过它会显示SVG大小。我说会发生“非常有趣的事情”。基于此，您可以开始思考getBBox
是如何工作的。。。