如何防止剪裁使用 D3 库（在 Javascript 中）绘制的 SVG？

Question

我正在尝试创建一个大的 SVG 矩形来侦听鼠标点击，但无论设置的值如何，SVG 的宽度似乎都在 300 像素左右上限。我在网上阅读了很多示例，并认为这可能是由视框和视口设置 (http://jonibologna.com/svg-viewbox-and-viewport/) 引起的，但没有成功。下面是我的程序的简化版本，它演示了这个问题。

（这里还有一个 jsfiddle：http://jsfiddle.net/bologna/pyLLu6rh/）

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<body>
    <div class="container">
        <div class="page-header">
                <h1>Title</h1>

            <p>Blah blah blah...</p>
        </div>
        <div id="results"></div>
        <div id="legend">
            <p style="font-size:80%">The orange dots represent buses as they arrive to pick up passengers, and the green dots represent people when they get to the bus stop.</p>
        </div>
        <div id="touch-area"></div>
    </div>
    <!-- /class="container">-->
</body>

这是脚本：

initGraphs();

function initGraphs() {

    var svg = d3.select("#touch-area").append("svg")
        .append("g");
    // move range above overlay and call the overlay event handlers from there
    svg.append("rect")
        .attr("id", "touch-area1")
        .attr("class", "touch-area1")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", "400px")
        .attr("height", "60px")
        .attr("viewbox", "0 0 500 500")
        .attr("fill", "blue")
        .on("click", mouseclick);
};

function mouseclick() {
    console.trace('mouse click!!!');
    var pos = d3.mouse(this);
    console.trace('mouse ' + pos[0] + '  ' + pos[1]);
};

我是 HTML5、javascript、jQuery 和 D3 的新手，所以它很可能很简单？？如果你能在我开始诉诸咒语之前解决这个问题，非常感谢。

Answer 1

SVG 本身会剪辑任何位于 SVG 边界之外的内容。您的代码没有显示您是否正在做任何事情来确保 SVG 对矩形来说足够大。您需要：

var svg = d3.select("#touch-area").append("svg")
    .attr("width", 400)
    .attr("height", 60)
    .append("g");

或者您可以通过从 css 文件设置宽度和高度来实现相同的目的（但是您必须使用 400px）。

最后，当通过 CSS 设置大小时，我遇到了至少一种浏览器（我认为是 Firefox），您还必须在其中制作 SVG display:block 或 display:inline-block适用尺寸。

如何防止剪裁使用 D3 库（在 Javascript 中）绘制的 SVG？

How do I prevent clipping of an SVG drawn with the D3 library (in Javascript)?

javascript

css

jquery

svg

d3.js