Question

我有以下代码，并希望看到一个宽薄的浅灰色矩形 - 为什么矩形不是700px宽？

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Testing Pie Chart</title>
    <script src="http://d3js.org/d3.v3.js"></script>
    <style type="text/css">
    .clickBut {
        font-family: verdana;
        font-size: 9px;
        font-weight: bold;
        background-color: #ffa500 !important;
        border-radius: 100px;
        shape-rendering: crispEdges;
    }
    
    #prodTitle {
        position: absolute;
        top: 5px;
        left: 10px;
        width: 750px;
        height: 35px;
    }
    
   
    
    .slice {
        font-size: 12pt;
        font-family: Verdana;
        fill: white;
        font-weight: bold;
    }
    
    .line {
        fill: none;
        stroke-width: 3px;
    }
    
    .title {
        font-family: Verdana;
        font-size: 11px;
        font-weight: bold;
    }
    
    .yAxis text,
    .xAxis text {
        font: 7pt Verdana;
        stroke: none;
        fill: black;
    }
    
    .axis--y path,
    .axis--x path {
        display: none;
    }
    
    .axis--x line,
    .axis--y line {
        stroke: black;
        fill: none;
        stroke-width: 2px
    }
    
    .axis--y line {
        stroke-width: 1px
    }
    
    .bar:hover {
        fill: orange;
    }
    
    .d3-tip {
        line-height: 1;
        font-size: 10px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
        border-radius: 2px;
    }
    
    .d3-tip:after {
        box-sizing: border-box;
        display: inline;
        font-size: 10px;
        width: 100%;
        line-height: 1;
        color: rgba(0, 0, 0, 0.8);
        content: "\25BC";
        position: absolute;
        text-align: center;
    }
    
    .d3-tip.n:after {
        margin: -1px 0 0 0;
        top: 100%;
        left: 0;
    }
    </style>
</head>

<body>
    <!-- <div id="square"></div> -->
    <div id="prodTitle"></div>
    <script type="text/javascript">


    addProdTitl();


    // ###########################################
    function prodTitlBasics() {
        var margin = {
                top: 2,
                right: 2,
                bottom: 2,
                left: 70
            },
            width = 700,
            height = 35;

        return {
            margin: margin,
            width: width,
            height: height
        };
    }

    function addProdTitl() {

        var basics = prodTitlBasics();
        var margin = basics.margin,
            width = 700 - margin.left - margin.right,
            height = basics.height;

        console.log(width)

        var t = d3.select("#prodTitle")
            .append("svg");

        var x = t
            .append("g")
            .attr({
                "transform": "translate(" + margin.left + "," + height + ")",
                id: "svgGxxx"
            });

        x
            .append("rect")
            .attr({
                "transform": "translate(5,5)" 
            })
            .attr({
                x: 0, //margin.left,
                y: 0, //margin.top,
                width: 700, //width,
                height: 5, //20,
                fill: "lightgrey"
            })

    }


    
    </script>
</body>

</html>

Answer 1

对于大多数浏览器，当您未设置SVG的宽度x高度时，它会自动设置为默认大小300 x 150。

让我们检查一下。首先，我们附加SVG而不定义其宽度或高度：

var svg = d3.select("body").append("svg");

之后，让我们看看它的宽度/高度：

svg.node().getBoundingClientRect()

查看演示：

＆＃13;

var svg = d3.select("body").append("svg");

console.log("width is " + svg.node().getBoundingClientRect().width);

console.log("height is " + svg.node().getBoundingClientRect().height);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

正如评论中所提到的，这个补充回答了这个问题：

    var t = d3.select("#prodTitle")
        .append("svg")
        .attr({"width":"100%"}); //<<added so it expands to required width

为什么这个矩形不宽

1 个答案: