<script type="text/javascript">
var divElem = d3.select("#svgpathSVGdata");
方 block 数据
var jsonsquare = [{
x: 40,
y: 170,
width: 120,
height: 120,
label: "technology"
},
];
设置 Canvas ,当然宽度和高度已经声明
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;
});
将标签链接到方 block
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 以获得完全可见性,或设置为中间的某个数字以获得半透明填充效果。
关于javascript - ("svg:rect") 运行时元素未出现在屏幕上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12732010/