1 
<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>​​​​​
4

1 に答える 1

0

長方形の属性をその下のグループ（つまり、svg:g）に割り当てます。以下の行で、を削除する.append("svg:g")と機能するはずです。

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

また、不透明度をゼロに設定しています。

.attr('opacity', 0)

これにより、長方形が非表示になります。完全に表示するには1に設定し、半透明の塗りつぶし効果にはその間の数値を設定します。

于 2012-10-04T19:59:09.647 に答える