Question

<script type="text/javascript">
    var divElem = d3.select("#svgpathSVGdata");

正方形数据

var jsonsquare = [{
    x: 40,
    y: 170,
    width: 120,
    height: 120,
    label: "technology"
    },

    ];

设置画布当然宽度＆amp;已宣布身高

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>

Answer 1

您将矩形的属性分配给它下面的组（即svg:g）。在下面的行中，删除.append("svg:g")，它应该有效。

square.enter().append('svg:rect').append("svg:g")

另外，您将不透明度设置为零：

.attr('opacity', 0)

这使您的矩形不可见。将其设置为1而不是完全可见性，或者将其设置为中间的一些数字以获得半透明填充效果。

（“svg：rect”）元素在运行时不会出现在屏幕上

1 个答案: