Tôi đang làm việc trên biểu đồ bong bóng và tôi đã đính kèm sự kiện nhấp chuột vào mỗi vòng kết nối. Khi nhấp vào một vòng tròn, biểu đồ bong bóng sẽ được thay thế bằng một biểu đồ mới thể hiện thông tin chi tiết hơn.Truy cập đối tượng SVG D3 trong sự kiện nhấp chuột
Đây là một phần của mã:
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return scaleX(d[2]);
})
.attr("cy", function(d) {
return scaleY(100 - d[1]);
})
.attr("r", function(d) {
return d[1];
})
.attr("fill", "#4eb157")
.attr("stroke", "#00c4d4")
.attr("stroke-width", function(d) {
return d[1]*(1-d[2]/100)*1.5;
})
.on("click", function()
{
svg.selectAll("circle")
.data(new_dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return scaleX(d[2]);
})
.attr("cy", function(d) {
return scaleY(100 - d[1]);
})
.attr("r", function(d) {
return d[1];
})
.attr("fill", "#4eb157")
.attr("stroke", "#00c4d4")
.attr("stroke-width", function(d) {
return d[1]*(1-d[2]/100)*1.5;
});
svg.selectAll("text")
.data(new_dataset)
.enter()
.append("text")
.text(function(d) {
return d[0];
})
.attr("x", function(d) {
return scaleX(d[2]);
})
.attr("y", function(d) {
return scaleY(100 - d[1]);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");
});
vấn đề này được đưa ra khi tôi nhấp vào vòng tròn, toàn bộ đồ thị biến mất, nhưng không có đồ thị mới được hình dung. Tôi đã tìm ra rằng trong quá trình thực hiện hàm on click, đối tượng svg đã thay đổi từ trạng thái ban đầu của nó và đặc biệt một số thuộc tính như baseURI, clientHeight, clientWidth vv không được thiết lập nữa mặc dù ban đầu chúng đã tạo ra svg vật. Đây là mã mà tôi đang tạo đối tượng svg:
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
Câu hỏi của tôi là tại sao biểu đồ mới không xuất hiện? Đây có phải là vì các thuộc tính đã thay đổi của đối tượng svg không? Tôi nên thay đổi gì trong chức năng nhấp chuột để làm cho biểu đồ mới hình dung thành công?
Cảm ơn!