Question

我使用svg创建了d3js图片。我有一个方案来点击弹出窗口显示相同的图形，所以我与现有div元素的click上的另一个svg元素重复。

它有效。但结果是错误的。附加的新svg是预先挂起的，并且作为第一个元素而不是最后一个元素。

在我的第一个元素上，我的不透明度为0.5' in the duplicated element i have the不透明度：1`，颜色变为“蓝色”，但它无法以正确的方式工作。这是我的代码：

var w = 100;
var h = 100;
var padding = 5;

var svg = d3.select('#svg1').append('svg')
    .attr({
        width: w,
        height: h
    });

svg.append('rect')
    .attr({
        width: w,
        height: h,
        fill: 'red'
    });

var little = svg.selectAll('rect.small')
    .data(d3.range(9));



little.enter().append('rect')
    .attr({
        width: w / 3 - padding * 2,
        height: h / 3 - padding * 2,
        fill: 'grey',
        x: function(d) { return d % 3 * (w / 3) + padding; },
        y: function(d) { return ~~(d / 3) * (h / 3) + padding; }
    });

var group = svg.append("svg:g").attr("id", "textInfo")
.attr("transform", "translate("+ w/2+","+h/2+")");

var text = group.append("text").text("Testing")
    .attr("class", "inform")
    .style({
    "text-anchor" : "middle",
    "fill" : "yellow",
    "opacity" : 0.5
});

function addAnother() {
    var content = d3.select("#svg1").html();
    var div = d3.select('#svg2').html(content);
    //adding text

    d3.select('.inform').style({
        "fill" : "blue",
        "opacity" : 1
    })
}

svg.on('click', addAnother);

Online Demo

Answer 1

第二个元素已正确附加，但是当您使用 inform 类选择元素时，实际上最终会选择并更改第一个元素。

如果要更改第二个元素（附加元素）的样式，则必须更改选择器：

d3.select('.inform').style({
    "fill" : "blue",
    "opacity" : 1
})

为：

d3.select('#svg2 .inform').style({
    "fill" : "blue",
    "opacity" : 1
})

d3js - 在复制SVG元素时，导致输出错误

1 个答案: