Question

我正在尝试创建一个侦听鼠标点击的大型SVG矩形，但无论设置的值如何，SVG的宽度似乎都会达到300 px左右。我在网上阅读了很多例子，并认为它可能是由viewbox和viewport设置引起的（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对于rect来说足够大。你需要：

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？

1 个答案: