如何解决D3-SVG元素是从主体而不是SVG容器放置的
我正在尝试在Rails应用程序中使用d3。
可视化的其他元素不在页面顶部和左侧。
我的问题是,当我将(x,y)定位到任何svg元素时,它似乎是基于页面的body
而不是svg进行的。这是典型的吗?有什么办法可以让我始终从svg的(0,0)位置(左上角)开始定位?
我正在选择一个元素,并附加一个svg
和g
标签,然后附加一个text
,我想我是在期待中,因为所有附加内容都将被放置/放置在其父对象中
示例:
var g = d3.select("#chart-area").append("svg")
.attr("width",width + margin.left + margin.right)
.attr("height",height + margin.top + margin.bottom)
.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")")
g.append("text")
.attr("class","x axis-label")
.attr("x",width / 2)
.attr("y",height + 75)
.attr("font-size","20px")
.attr("text-anchor","middle")
.text("Months")
其结果是标签将显示在宝石的UI下方。
这不是实际的项目,而是教程,但是我使用的是基本相同的代码: https://jsfiddle.net/r6jkht9v/1/
解决方法
我的解决方案主要基于添加一些引导标记。
<div class="container">
<div class="row">
d3
</div>
</div>
添加了此svg元素后,我将其附加在svg中。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。