[英]D3.js Invisible rect element when using d3 append to add “rect” elements to an svg
[英](“svg:rect”) element does not appear on the screen when run
<script type="text/javascript">
var divElem = d3.select("#svgpathSVGdata");
正方形数据
var jsonsquare = [{
x: 40,
y: 170,
width: 120,
height: 120,
label: "technology"
},
];
设置画布,当然已经声明了宽度和高度
var svgcanvas = divElem.append("svg:svg")
.attr("width", w).attr("height", h);
这是相关的编码...由于某种原因,它不会产生平方
var square = svgcanvas.selectAll("rect").data(jsonsquare);
circle.enter().append('svg:rect').append("svg:g")
.attr('opacity', 0)
.attr("cursor", "pointer");
}).attr("x", function(d) {
return d.x;
}).attr("y", function(d) {
return d.y;
}).attr("width", function(d) {
return d.width;
}).attr("height", function(d) {
return d.height;
});
将标签链接到正方形
svgcanvas.selectAll("text").data(jsonsquare).enter().append("svg:text").text(function(d) {
return d.label;
}).attr("x", function(d) {
return d.x + 10;
}).attr("y", function(d) {
return d.y + 10;
});
</script>
您正在将矩形的属性分配给其下方的组(即svg:g
)。 在下面的行中,删除.append("svg:g")
,它应该可以工作。
square.enter().append('svg:rect').append("svg:g")
另外,您将不透明度设置为零:
.attr('opacity', 0)
这使您的矩形不可见。 请将其设置为1以获得完整的可见性,或将其设置为介于中间的某个数字以产生半透明的填充效果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.