gpt4 book ai didi

d3.js - 附加到在 d3 js 中不起作用的组

转载 作者:行者123 更新时间:2023-12-02 17:32:27 25 4
gpt4 key购买 nike

附加到组不起作用。我创建了一个组并附加了一个矩形和一个圆圈。我可以看到矩形,但无法在屏幕上看到圆圈。但是,检查控制台中显示圆形 dom 的元素。

演示:http://jsbin.com/gebivavuxi/1/edit?html,js,output

<!doctype html>
<html>
<head>
<title>Editor</title>
<meta http-equiv="x-ua-compatible" content="ie=9"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/style.css" />
<script type="text/javascript">
window.onload = function ()
{
var svgContainer = d3.select("body").append("svg")
.attr("width", 800)
.attr("height", 803);

var group = svgContainer.append("g")
.append("rect")
.attr("x", 250)
.attr("y", 250)
.attr("width", 351)
.attr("height", 241)
.attr("rx", 10)
.attr("stroke-width", 2)
.attr("stroke", "#7E7E7E")
.style("fill", "none");

group.append("circle")
.attr("cx", 10)
.attr("cy", 10)
.attr("r", 25)
.style("fill", "red")
.style("stroke-width", 2)
.style("stroke", "#CDB483");

};
</script>
</head>
<body>
<div id="container">
<div id="header" style="margin-bottom: 0;">
<h1 id="title">Editor</h1>
<div id="footer"></div>
</div>
</div>
</body>
</html>

最佳答案

按照您当前编写代码的方式,group 变量指的是 rect 元素。只需更改这部分代码:

var group = svgContainer.append("g")
.append("rect")
...

到:

var group = svgContainer.append("g");

group
.append("rect")
...

为了将 g 元素分配给 group 变量,然后将 rectcircle 附加到g 元素。

关于d3.js - 附加到在 d3 js 中不起作用的组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31383045/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com