首页 / JAVASCRIPT / javascript – d3生成的SVG没有响应

javascript – d3生成的SVG没有响应

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – d3生成的SVG没有响应，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1878字，纯文字阅读大概需要3分钟。

内容图文

我正在尝试创建一个响应式SVG.我已经成功创建了一个示例SVG：

<html xmlns:xlink="http://www.w3.org/1999/xlink"><head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  </head>
  <body>
    <div id="container">
        <svg viewBox="0 0 600 200" preserveAspectRatio="xMidYMid" id="chart">
            <circle fill="red" cy="100" cx="100" r="100"></circle>
            <circle fill="blue" cy="100" cx="300" r="100"></circle>
            <circle fill="green" cy="100" cx="500" r="100"></circle>
        </svg>
    </div>
</body></html>

https://jsfiddle.net/andrewsu/kombdqL2/4/

https://gist.github.com/andrewsu/d3ed340495a2f21a25f8f69dedb2096a

如果您在jsfiddle版本中调整面板边界,则可以看到圆圈的大小适当缩放.

我想用D3创建完全相同的SVG.

<html xmlns:xlink="http://www.w3.org/1999/xlink"><head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
  </head>
  <body>
    <div id="container">
    </div>

    <script type="text/javascript">
        var width=600, height=200;
        var svg = d3.select("#container").append("svg")
        .attr("id","chart")
        .attr("preserveAspectRatio", "xMidYMid")
        .attr("viewbox", "0 0 "+ width + " " + height);
        svg.append("circle")
            .attr("r","100")
            .attr("cx","100")
            .attr("cy","100")
            .attr("fill","red");
        svg.append("circle")
            .attr("r","100")
            .attr("cx","300")
            .attr("cy","100")
            .attr("fill","blue");
        svg.append("circle")
            .attr("r","100")
            .attr("cx","500")
            .attr("cy","100")
            .attr("fill","green");
    </script>

</body></html>

https://jsfiddle.net/andrewsu/g1x3s2ny/5/

https://gist.github.com/andrewsu/bf0e7549934f93ac40a416dc17bb7b1e

尽管我可以说,渲染的HTML完全相同,但第二个示例无法正常工作(请参阅jsfiddle).

奇怪的是,如果我使用浏览器的检查器来更改viewBox属性中的任何四个数字,行为会立即按预期工作.

思考？

解决方法:

viewBox有一个大写的B：

.attr("viewBox", "0 0 "+ width + " " + height);

现在检查你的小提琴：https://jsfiddle.net/on17ga9u/

这是文档：https://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

内容总结

以上是互联网集市为您收集整理的javascript – d3生成的SVG没有响应全部内容，希望文章能够帮你解决javascript – d3生成的SVG没有响应所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/787820.html

来源：【匿名】