[英]D3: dom elements appended to the unexpected parent nodes
以下代碼最初為每個包含另一個矩形(類“ rect_b”)的<g>元素創建3個矩形(類“ bar_start”)+。 更新后(其他3個數據集值),所有元素的數量從3個增加到6個(精細),但是新的“ bar_start”矩形與<g>節點掛鈎並進行相應的轉置。
為什么會這樣呢?
var colors = [[66,124,153],[154,61,55],[106,125,57],[129,42,77],[204,94,41],[219,170,53]];
//coordinates
var w = 500; //svg width
var h = 200; //svg height
var p = 3; //svg padding
var segment_height = h* 0.2; //height of bars
var label_height = segment_height/2; //legend rect height
var label_width = (w - 4 * p) / 3; //legend rect width
var s = 3; //break width between bars
//dataset
var dataset1 = [{data: 7, attribute: "Project"}, {data: 14, attribute: "Other"}, {data: 95, attribute: "Other2"}];
var dataset2 = [{data: 45, attribute: "Jaja"}, {data: 25, attribute: "Dupa"}, {data: 10, attribute: "Process"},
{data: 7, attribute: "Project"}, {data: 14, attribute: "Other"}, {data: 14, attribute: "Other"}];
var dataIndex;
//create svg
var svg = d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h)
.attr("y", 100)
.style("border", "1px solid black");
function update() {
if (dataIndex==1) {
dataIndex = 2
} else {
dataIndex = 1
}
//debugger;
var dataset = [];
dataset = eval("dataset" + dataIndex);
//debugger;
//total length of bars
var length_of_segments = w - 2 * p - (dataset.length-1) * s;
//find sum of values
var sum_of_data = 0;
for (var i = 0; i < dataset.length; i++) {
sum_of_data = sum_of_data + dataset[i].data
};
//set scale
var scale = d3.scale.linear()
.domain([0, sum_of_data])
.range([0, length_of_segments]);
var array = new Array();
array[0] = new Array();
array[1] = new Array();
//set width and x for bars
for (var i = 0; i < dataset.length; i++) {
//placeholder for width
array[0][i] = scale(dataset[i].data);
//placeholder for x
if (i==0) {
array[1][i] = p
} else {
array[1][i] = array[1][i-1] + array[0][i-1] + s
};
};
//bars
var label_rect = svg.selectAll("rect")
.data(dataset);
label_rect
.exit()
.remove();
label_rect
.enter()
.append("rect")
.attr("x",0)
.attr("width", 0);
label_rect
.transition()
.attr("class", "bar_start")
.attr("x", function(d,i) {
if (i==0) {
return p
} else {
return s + array[0][i-1] + array [1][i-1]
};
})
.attr("y", p)
.attr("width", function(d,i) {
return array[0][i];
})
.attr("height", segment_height)
.attr("fill", function(d,i) {
return "rgb(" + colors[i][0] + "," + colors[i][1] + "," + colors[i][2] + ")"
})
//gs for legend
var g = svg.selectAll("g")
.data(dataset)
g
.exit()
.remove();
g
.enter()
.append("g");
g
.attr("class", "g_start")
.attr("transform", function(d,i) {a=(p + (((i/3)-Math.floor(i/3))*3) * (label_width + p));
return "translate("
+ (p + (((i/3)-Math.floor(i/3))*3) * (label_width + p)) + "," //count x - position in row
+ (2*p + segment_height + (Math.floor(i/3)) * (label_height+p)) + ")"; //count y - number of row
})
g.append("rect")
.attr("class", "rect_b")
.attr("width", label_width-1)
.attr("height", label_height-1)
.attr("rx", label_width*0.02)
.attr("ry", label_width*0.02)
};
d3.select("p").on("click", function() {
update();
});
只是我沒有區分兩個“直腸”人群。 將它們放在具有不同ID的單獨的<g>元素中,並在對其父節點進行顯式引用的情況下進行操作,一切正常。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.