d3.js 无法使用通用更新模式和转换
d3.js unable to use general update pattern and transition
有人可以帮我解决这个 d3.js 问题吗？我正在尝试关注 M. Bostock 'General Update Pattern'。我进行了研究，试图找到解决方案，但一无所获。
我不使用列和行，而是画线。
程序显示两种模式，32行组合在一起
"g"，我假设。
我希望两组线条显示在另一组之上，一组通过样式更改为不透明度而消失，或者
将剩余的一组线放在与
第一组线消失后的第一组线（原点为 0.0）。
我认为问题在于如何将它们与 "g" 分组，但我
没有把握。我尝试了各种附加到 div、容器的方法，
并使用转换、翻译，但没有任何效果。我试过了
更改容器的大小，这也不起作用。
我认为 svgs 在转换后被删除了，但我没有
了解如何"move up"第二组行。
示例位于 jsfiddle:
https://jsfiddle.net/wheatgrass/t3bgcxhu/
感谢您的帮助。我很喜欢学习 d3.js。
<script>
var num = 0;
var width = 660,
height = 25;
var radius = 2;
d3.select("body").selectAll("h1").data([{}])
.enter().insert("h1").html("Some text here")
var svg = d3.select("#svgcontainer").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
var g = svg.append("svg:g")
.attr("transform", "translate(0, 0)") ;
function getpatterndata(num) {
if (num == 1) {
var pdata = cellular(); }
else { pdata = cellular2(); }
console.log("pdata",pdata);
return pdata;
}
function makelines(datas) {
var entries = d3.entries(datas);
var thelines = [];
var oneline = [];
entries.forEach( function (d) {
var line = d.value.split(" ");
thelines.push(line);
});
//console.log("thelines", thelines);
return thelines;
}
function update(thelines,num) {
// DATA JOIN
// Join new data with old elements, if any.
// and UPDATE
for (i =0; i< thelines.length; i++) {
var oneline = thelines.pop();
//append lines to container
var sampleSVG = d3.select("body")
.append("svg")
.attr("width", 660)
.attr("height", 10);
var circles = sampleSVG.selectAll("circle")
.data(oneline)
.enter()
.append("circle");
var circleAttributes = circles
.attr("cx", function(d,i) {return (i*10)} )
.attr("cy", 3)
.attr("transform", "translate(30," + (0) + ")")
.transition().duration(2000)
.attr("r", function(d,i) { if (+d == 1)
{ return r=3; } else { return r = 2;}})
.style("fill", function(d) {
var returnColor;
if (+d === 0) { returnColor = "lightblue";
} else if (+d === 1) { returnColor = "red";
} else if (+d === 0) { returnColor = "green"; }
return returnColor;
})
.transition(3000).delay(2000)
.attr("opacity", 0.01)
.transition().remove();
}
}
function update2(thelines,num) {
// DATA JOIN
// Join new data with old elements, if any.
// and UPDATE
for (i =0; i< thelines.length; i++) {
//for (i = thelines.length; i >= 0; i--) {
var oneline = thelines.pop();
//append lines to container
var sampleSVG = d3.select("body")
.append("svg")
.attr("width", 660)
.attr("height", 10)
.attr("transform", "translate(0, 0)") ;
var circles = sampleSVG.selectAll("body")
.data(oneline) //will be oneline
.enter()
.append("circle");
var circleAttributes = circles
.attr("cx", function(d,i) {return (i*10)} )
.attr("cy", 3)
.attr("transform", "translate(30,0)")
.transition().duration(2000)
.attr("r", function(d,i) { if (+d == 1)
{ return r=3; } else { return r = 2;}})
.style("fill", function(d) {
var returnColor;
if (+d === 0) { returnColor = "lightblue";
} else if (+d === 1) { returnColor = "red";
} else if (+d === 0) { returnColor = "green"; }
return returnColor;
});
}
}
// The initial display.
var initialpattern = [];
var secpattern = [];
initialpattern = getpatterndata(2);
var thepatternrows = [];
thepatternrows = makelines(initialpattern);
update(thepatternrows,2);
secpattern = getpatterndata(1);
thepatternrows = makelines(secpattern);
update2(thepatternrows,1);
我试着看看你的 jsfiddle，但 d3 资源似乎没有正确加载（控制台记录了一些关于加载非 https 资源的错误）。
我创建了一个 plunker：
http://plnkr.co/edit/UnOiooAFsprAYDQcyNFi?p=preview
var num = 0;
var width = 660,
height = 800;
var radius = 2;
d3.select("body").selectAll("h1").data([{}]).enter()
.insert("h1").html("Some text here")
var svg = d3.select("#svgcontainer").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var g = svg.append("svg:g")
.attr("transform", "translate(0, 0)");
function getpatterndata(num) {
if (num == 1) {
var pdata = cellular();
} else {
pdata = cellular2();
}
console.log("pdata", pdata);
return pdata;
}
function makelines(datas) {
var entries = d3.entries(datas);
var thelines = [];
var oneline = [];
entries.forEach(function(d) {
var line = d.value.split(" ");
thelines.push(line);
});
console.log("thelines", thelines);
return thelines;
}
function update(thelines, num) {
// DATA JOIN
// Join new data with old elements, if any.
console.log(thelines)
// and UPDATE
for (i = 0; i < thelines.length; i++) {
//for (i = thelines.length; i >= 0; i--) {
var oneline = thelines.pop();
console.log(oneline);
//append lines to container
var circles = g
.selectAll(".dummy")
.data(oneline) //will be oneline
.enter()
.append("circle")
.classed('first-update',true);
//console.log("inside update,oneline", oneline);
var circleAttributes = circles.attr("cx", function(d, idx) {
var x= idx*10;
console.log('x: ',x)
return x;
})
.attr("cy", function(d, idx) {
var y = (i + 1) * 10;
console.log('y: ',y)
return y;
})
.attr('r',2)
.attr("transform", "translate(30," + (0) + ")")
.transition().duration(2000)
.attr("r", function(d, i) {
if (+d == 1) {
return 3;
} else {
return 2;
}
})
.style("fill", function(d) {
var returnColor;
if (+d === 0) {
returnColor = "lightblue";
} else if (+d === 1) {
returnColor = "red";
} else if (+d === 0) {
returnColor = "green";
}
return returnColor;
})
.transition(3000)
.delay(2000)
.attr("opacity", 0.01)
.transition();
//.remove();
}
} //end function
function update2(thelines, num) {
// DATA JOIN
// Join new data with old elements, if any.
// and UPDATE
for (i = 0; i < thelines.length; i++) {
//for (i = thelines.length; i >= 0; i--) {
var oneline = thelines.pop();
//append lines to container
//var sampleSVG = d3.select('svg');
var circles = g //.selectAll("body")
.selectAll('.dummy')
.data(oneline)
//will be oneline
.enter()
.append("circle");
console.log("inside update,oneline", oneline);
var circleAttributes = circles.attr("cx", function(d, idx) {
return (idx * 10);
})
.attr("cy", function(d,idx){return i*10;})
.attr("transform", "translate(30,0)")
.transition().duration(2000)
.attr("r", function(d, i) {
if (+d == 1) {
return 3;
} else {
return 2;
}
})
.style("fill", function(d) {
var returnColor;
if (+d === 0) {
returnColor = "lightblue";
} else if (+d === 1) {
returnColor = "red";
} else if (+d === 0) {
returnColor = "green";
}
return returnColor;
});
}
}
// The initial display.
var initialpattern = [];
var secpattern = [];
initialpattern = getpatterndata(2);
var thepatternrows = [];
thepatternrows = makelines(initialpattern);
console.log("thepatternrows", thepatternrows);
update(thepatternrows, 2);
//d3.select('div').attr("class",".inside").selectAll("*").remove();
secpattern = getpatterndata(1);
thepatternrows = makelines(secpattern);
update2(thepatternrows, 1);
//#myc11a.js
//randomized, and returns a big list of strings separated by a space
function cellular2() {
// This is the same as the other pattern input except it randomizes
// the neighbors.
// My attempt to translate from python to d3.js javascript
//def ca():
// ''' Celluar automata with Python - K. Hong'''
// # 64 Boolean - True(1) : '*'
// # - False(0): '-'
// # Rule - the status of current cell vaue is True
// # if only one of the two neighbors at the previous step is True('*')
// # otherwise, the current cell status is False('-')
// # list representing the current status of 64 cells
var ca = [];
for (i = 0; i < 64; i++) {
var arval = Math.round(Math.random());
ca.push(arval);
}
//# new Cellular values
// dic = { 0:"-", 1: "*" }
//# initial draw - step 0
//print ''.join( [dic[e] for e in ca_new])
//console.log('initial ca',ca);
var ca_next_string = '';
var castring = ca.valueOf();
//console.log("initial castring",castring);
var castring2 = ca.join(" ");
//console.log("initial castring2",castring2);
var ca_lol0 = [];
ca_lol0.push(castring2);
//ca_lol0.push("\n");
var ca_new = ca;
castring = ''
castring2 = ''
// additional 31 steps
// loop through 0 to 63 and store the current cell status in ca_new list
var ca_next = [];
var step = 1;
while (step < 32) {
ca_new = [];
// loop through 0 to 63 and store the current cell status in ca_new list
for (var i = 0; i < 64; i++) {
// inside cells - check the neighbor cell state
if (i > 0 && i < 63) {
if (ca[i - 1] == ca[i + 1]) {
ca_new.push(0);
} else {
ca_new.push(1);
}
}
// left-most cell : check the second cell
else if (i == 0) {
if (ca[1] == 1) {
ca_new.push(1);
} else {
ca_new.push(0);
}
}
// right-most cell : check the second to the last cell
else if (i == 63) {
if (ca[62] == 1) {
ca_new.push(1);
} else {
ca_new.push(0);
}
}
castring0 = ca_new.join(" ");
castring20 = ca_new.concat("\n");
} //end of for
//draw current cell state
//this one contains 0,1
ca_lol0.push(castring20.join(' '))
//ca_lol0.push(castring20)
//ca_lol0.push('\n')
//update cell list
ca = ca_new;
ca_next = [];
step = step + 1;
} //end of while
// console.log("final list of strings",ca_lol0);
console.log("pattern of randomized neighbors");
// return castring20;
return ca_lol0;
}
//myc11.js
//returns a big list of strings separated by a space
function cellular() {
// my attempt to translate from python to d3.js javascript
//def ca():
// ''' Celluar automata with Python - K. Hong'''
// # 64 Boolean - True(1) : '*'
// # - False(0): '-'
// # Rule - the status of current cell vaue is True
// # if only one of the two neighbors at the previous step is True('*')
// # otherwise, the current cell status is False('-')
// # list representing the current status of 64 cells
var ca = [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
];
//# new Cellular values
// dic = { 0:"-", 1: "*" }
//# initial draw - step 0
//print ''.join( [dic[e] for e in ca_new])
//console.log('initial ca',ca);
var ca_next_string = '';
var castring = ca.valueOf();
//console.log("initial castring",castring);
var castring2 = ca.join(" ");
//console.log("initial castring2",castring2);
var ca_lol0 = [];
ca_lol0.push(castring2);
//ca_lol0.push("\n");
var ca_new = ca;
castring = ''
castring2 = ''
// additional 31 steps
// loop through 0 to 63 and store the current cell status in ca_new list
var ca_next = [];
var step = 1;
while (step < 32) {
ca_new = [];
// loop through 0 to 63 and store the current cell status in ca_new list
for (var i = 0; i < 64; i++) {
// inside cells - check the neighbor cell state
if (i > 0 && i < 63) {
if (ca[i - 1] == ca[i + 1]) {
ca_new.push(0);
} else {
ca_new.push(1);
}
}
// left-most cell : check the second cell
else if (i == 0) {
if (ca[1] == 1) {
ca_new.push(1);
} else {
ca_new.push(0);
}
}
// right-most cell : check the second to the last cell
else if (i == 63) {
if (ca[62] == 1) {
ca_new.push(1);
} else {
ca_new.push(0);
}
}
castring0 = ca_new.join(" ");
castring20 = ca_new.concat("\n");
} //end of for
//draw current cell state
//this one contains 0,1
ca_lol0.push(castring20.join(' '))
//ca_lol0.push(castring20)
//ca_lol0.push('\n')
//update cell list
ca = ca_new;
ca_next = [];
step = step + 1;
} //end of while
// console.log("final list of strings",ca_lol0);
console.log("pattern of static assigned neighbors");
// return castring20;
return ca_lol0;
}
我注意到的第一件事是您在更新循环的每次迭代中创建了一个 svg。这一步不是必需的，因为您正在顶部创建您的 svg，以及一个用于存储您的圈子的组（我猜是这样）。
至于更新模式，这是它的工作原理（据我了解）：
- 您必须 select 您要更新的元素类型（在上面的代码中：selectAll('.dummy')）
- 您设置要绑定的数据 ( .data(oneline) )
- 你做你的操作（添加圈子，设置它们的属性等）
- 您退出并删除
现在在上面的代码中，我在绑定到数据之前使用了 .dummy selector 以避免 selecting 现有对象。正确的方法是使用 .selectAll('circle')，但在那种情况下，您只会得到一行圆圈，因为现有的圆圈每次都会重新selected .这与您自己在线路上循环的事实有关。我会尝试直接绑定到原始集合，并尝试正确使用回调函数来计算 cx 和 cy。我会自己做吗，我什至会创建一个带有 属性 x 和 y 的对象数组，这样我就可以轻松构建我的圈子（但这是个人数据设计选择）。
此外，在循环中使用变量 i 以及在计算 cx 和 cy 的回调函数中作为索引器时要小心，这可能会导致冲突。
我希望这很清楚（呃）并且它有所帮助；否则我将尝试详细说明所需的要点。
有人可以帮我解决这个 d3.js 问题吗？我正在尝试关注 M. Bostock 'General Update Pattern'。我进行了研究，试图找到解决方案，但一无所获。
我不使用列和行，而是画线。
程序显示两种模式，32行组合在一起 "g"，我假设。
我希望两组线条显示在另一组之上，一组通过样式更改为不透明度而消失，或者
将剩余的一组线放在与 第一组线消失后的第一组线（原点为 0.0）。
我认为问题在于如何将它们与 "g" 分组，但我 没有把握。我尝试了各种附加到 div、容器的方法， 并使用转换、翻译，但没有任何效果。我试过了 更改容器的大小，这也不起作用。
我认为 svgs 在转换后被删除了，但我没有 了解如何"move up"第二组行。
示例位于 jsfiddle:
https://jsfiddle.net/wheatgrass/t3bgcxhu/
感谢您的帮助。我很喜欢学习 d3.js。
<script>
var num = 0;
var width = 660,
height = 25;
var radius = 2;
d3.select("body").selectAll("h1").data([{}])
.enter().insert("h1").html("Some text here")
var svg = d3.select("#svgcontainer").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
var g = svg.append("svg:g")
.attr("transform", "translate(0, 0)") ;
function getpatterndata(num) {
if (num == 1) {
var pdata = cellular(); }
else { pdata = cellular2(); }
console.log("pdata",pdata);
return pdata;
}
function makelines(datas) {
var entries = d3.entries(datas);
var thelines = [];
var oneline = [];
entries.forEach( function (d) {
var line = d.value.split(" ");
thelines.push(line);
});
//console.log("thelines", thelines);
return thelines;
}
function update(thelines,num) {
// DATA JOIN
// Join new data with old elements, if any.
// and UPDATE
for (i =0; i< thelines.length; i++) {
var oneline = thelines.pop();
//append lines to container
var sampleSVG = d3.select("body")
.append("svg")
.attr("width", 660)
.attr("height", 10);
var circles = sampleSVG.selectAll("circle")
.data(oneline)
.enter()
.append("circle");
var circleAttributes = circles
.attr("cx", function(d,i) {return (i*10)} )
.attr("cy", 3)
.attr("transform", "translate(30," + (0) + ")")
.transition().duration(2000)
.attr("r", function(d,i) { if (+d == 1)
{ return r=3; } else { return r = 2;}})
.style("fill", function(d) {
var returnColor;
if (+d === 0) { returnColor = "lightblue";
} else if (+d === 1) { returnColor = "red";
} else if (+d === 0) { returnColor = "green"; }
return returnColor;
})
.transition(3000).delay(2000)
.attr("opacity", 0.01)
.transition().remove();
}
}
function update2(thelines,num) {
// DATA JOIN
// Join new data with old elements, if any.
// and UPDATE
for (i =0; i< thelines.length; i++) {
//for (i = thelines.length; i >= 0; i--) {
var oneline = thelines.pop();
//append lines to container
var sampleSVG = d3.select("body")
.append("svg")
.attr("width", 660)
.attr("height", 10)
.attr("transform", "translate(0, 0)") ;
var circles = sampleSVG.selectAll("body")
.data(oneline) //will be oneline
.enter()
.append("circle");
var circleAttributes = circles
.attr("cx", function(d,i) {return (i*10)} )
.attr("cy", 3)
.attr("transform", "translate(30,0)")
.transition().duration(2000)
.attr("r", function(d,i) { if (+d == 1)
{ return r=3; } else { return r = 2;}})
.style("fill", function(d) {
var returnColor;
if (+d === 0) { returnColor = "lightblue";
} else if (+d === 1) { returnColor = "red";
} else if (+d === 0) { returnColor = "green"; }
return returnColor;
});
}
}
// The initial display.
var initialpattern = [];
var secpattern = [];
initialpattern = getpatterndata(2);
var thepatternrows = [];
thepatternrows = makelines(initialpattern);
update(thepatternrows,2);
secpattern = getpatterndata(1);
thepatternrows = makelines(secpattern);
update2(thepatternrows,1);
我试着看看你的 jsfiddle，但 d3 资源似乎没有正确加载（控制台记录了一些关于加载非 https 资源的错误）。 我创建了一个 plunker： http://plnkr.co/edit/UnOiooAFsprAYDQcyNFi?p=preview
var num = 0;
var width = 660,
height = 800;
var radius = 2;
d3.select("body").selectAll("h1").data([{}]).enter()
.insert("h1").html("Some text here")
var svg = d3.select("#svgcontainer").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var g = svg.append("svg:g")
.attr("transform", "translate(0, 0)");
function getpatterndata(num) {
if (num == 1) {
var pdata = cellular();
} else {
pdata = cellular2();
}
console.log("pdata", pdata);
return pdata;
}
function makelines(datas) {
var entries = d3.entries(datas);
var thelines = [];
var oneline = [];
entries.forEach(function(d) {
var line = d.value.split(" ");
thelines.push(line);
});
console.log("thelines", thelines);
return thelines;
}
function update(thelines, num) {
// DATA JOIN
// Join new data with old elements, if any.
console.log(thelines)
// and UPDATE
for (i = 0; i < thelines.length; i++) {
//for (i = thelines.length; i >= 0; i--) {
var oneline = thelines.pop();
console.log(oneline);
//append lines to container
var circles = g
.selectAll(".dummy")
.data(oneline) //will be oneline
.enter()
.append("circle")
.classed('first-update',true);
//console.log("inside update,oneline", oneline);
var circleAttributes = circles.attr("cx", function(d, idx) {
var x= idx*10;
console.log('x: ',x)
return x;
})
.attr("cy", function(d, idx) {
var y = (i + 1) * 10;
console.log('y: ',y)
return y;
})
.attr('r',2)
.attr("transform", "translate(30," + (0) + ")")
.transition().duration(2000)
.attr("r", function(d, i) {
if (+d == 1) {
return 3;
} else {
return 2;
}
})
.style("fill", function(d) {
var returnColor;
if (+d === 0) {
returnColor = "lightblue";
} else if (+d === 1) {
returnColor = "red";
} else if (+d === 0) {
returnColor = "green";
}
return returnColor;
})
.transition(3000)
.delay(2000)
.attr("opacity", 0.01)
.transition();
//.remove();
}
} //end function
function update2(thelines, num) {
// DATA JOIN
// Join new data with old elements, if any.
// and UPDATE
for (i = 0; i < thelines.length; i++) {
//for (i = thelines.length; i >= 0; i--) {
var oneline = thelines.pop();
//append lines to container
//var sampleSVG = d3.select('svg');
var circles = g //.selectAll("body")
.selectAll('.dummy')
.data(oneline)
//will be oneline
.enter()
.append("circle");
console.log("inside update,oneline", oneline);
var circleAttributes = circles.attr("cx", function(d, idx) {
return (idx * 10);
})
.attr("cy", function(d,idx){return i*10;})
.attr("transform", "translate(30,0)")
.transition().duration(2000)
.attr("r", function(d, i) {
if (+d == 1) {
return 3;
} else {
return 2;
}
})
.style("fill", function(d) {
var returnColor;
if (+d === 0) {
returnColor = "lightblue";
} else if (+d === 1) {
returnColor = "red";
} else if (+d === 0) {
returnColor = "green";
}
return returnColor;
});
}
}
// The initial display.
var initialpattern = [];
var secpattern = [];
initialpattern = getpatterndata(2);
var thepatternrows = [];
thepatternrows = makelines(initialpattern);
console.log("thepatternrows", thepatternrows);
update(thepatternrows, 2);
//d3.select('div').attr("class",".inside").selectAll("*").remove();
secpattern = getpatterndata(1);
thepatternrows = makelines(secpattern);
update2(thepatternrows, 1);
//#myc11a.js
//randomized, and returns a big list of strings separated by a space
function cellular2() {
// This is the same as the other pattern input except it randomizes
// the neighbors.
// My attempt to translate from python to d3.js javascript
//def ca():
// ''' Celluar automata with Python - K. Hong'''
// # 64 Boolean - True(1) : '*'
// # - False(0): '-'
// # Rule - the status of current cell vaue is True
// # if only one of the two neighbors at the previous step is True('*')
// # otherwise, the current cell status is False('-')
// # list representing the current status of 64 cells
var ca = [];
for (i = 0; i < 64; i++) {
var arval = Math.round(Math.random());
ca.push(arval);
}
//# new Cellular values
// dic = { 0:"-", 1: "*" }
//# initial draw - step 0
//print ''.join( [dic[e] for e in ca_new])
//console.log('initial ca',ca);
var ca_next_string = '';
var castring = ca.valueOf();
//console.log("initial castring",castring);
var castring2 = ca.join(" ");
//console.log("initial castring2",castring2);
var ca_lol0 = [];
ca_lol0.push(castring2);
//ca_lol0.push("\n");
var ca_new = ca;
castring = ''
castring2 = ''
// additional 31 steps
// loop through 0 to 63 and store the current cell status in ca_new list
var ca_next = [];
var step = 1;
while (step < 32) {
ca_new = [];
// loop through 0 to 63 and store the current cell status in ca_new list
for (var i = 0; i < 64; i++) {
// inside cells - check the neighbor cell state
if (i > 0 && i < 63) {
if (ca[i - 1] == ca[i + 1]) {
ca_new.push(0);
} else {
ca_new.push(1);
}
}
// left-most cell : check the second cell
else if (i == 0) {
if (ca[1] == 1) {
ca_new.push(1);
} else {
ca_new.push(0);
}
}
// right-most cell : check the second to the last cell
else if (i == 63) {
if (ca[62] == 1) {
ca_new.push(1);
} else {
ca_new.push(0);
}
}
castring0 = ca_new.join(" ");
castring20 = ca_new.concat("\n");
} //end of for
//draw current cell state
//this one contains 0,1
ca_lol0.push(castring20.join(' '))
//ca_lol0.push(castring20)
//ca_lol0.push('\n')
//update cell list
ca = ca_new;
ca_next = [];
step = step + 1;
} //end of while
// console.log("final list of strings",ca_lol0);
console.log("pattern of randomized neighbors");
// return castring20;
return ca_lol0;
}
//myc11.js
//returns a big list of strings separated by a space
function cellular() {
// my attempt to translate from python to d3.js javascript
//def ca():
// ''' Celluar automata with Python - K. Hong'''
// # 64 Boolean - True(1) : '*'
// # - False(0): '-'
// # Rule - the status of current cell vaue is True
// # if only one of the two neighbors at the previous step is True('*')
// # otherwise, the current cell status is False('-')
// # list representing the current status of 64 cells
var ca = [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
];
//# new Cellular values
// dic = { 0:"-", 1: "*" }
//# initial draw - step 0
//print ''.join( [dic[e] for e in ca_new])
//console.log('initial ca',ca);
var ca_next_string = '';
var castring = ca.valueOf();
//console.log("initial castring",castring);
var castring2 = ca.join(" ");
//console.log("initial castring2",castring2);
var ca_lol0 = [];
ca_lol0.push(castring2);
//ca_lol0.push("\n");
var ca_new = ca;
castring = ''
castring2 = ''
// additional 31 steps
// loop through 0 to 63 and store the current cell status in ca_new list
var ca_next = [];
var step = 1;
while (step < 32) {
ca_new = [];
// loop through 0 to 63 and store the current cell status in ca_new list
for (var i = 0; i < 64; i++) {
// inside cells - check the neighbor cell state
if (i > 0 && i < 63) {
if (ca[i - 1] == ca[i + 1]) {
ca_new.push(0);
} else {
ca_new.push(1);
}
}
// left-most cell : check the second cell
else if (i == 0) {
if (ca[1] == 1) {
ca_new.push(1);
} else {
ca_new.push(0);
}
}
// right-most cell : check the second to the last cell
else if (i == 63) {
if (ca[62] == 1) {
ca_new.push(1);
} else {
ca_new.push(0);
}
}
castring0 = ca_new.join(" ");
castring20 = ca_new.concat("\n");
} //end of for
//draw current cell state
//this one contains 0,1
ca_lol0.push(castring20.join(' '))
//ca_lol0.push(castring20)
//ca_lol0.push('\n')
//update cell list
ca = ca_new;
ca_next = [];
step = step + 1;
} //end of while
// console.log("final list of strings",ca_lol0);
console.log("pattern of static assigned neighbors");
// return castring20;
return ca_lol0;
}
我注意到的第一件事是您在更新循环的每次迭代中创建了一个 svg。这一步不是必需的，因为您正在顶部创建您的 svg，以及一个用于存储您的圈子的组（我猜是这样）。
至于更新模式，这是它的工作原理（据我了解）：
- 您必须 select 您要更新的元素类型（在上面的代码中：selectAll('.dummy')）
- 您设置要绑定的数据 ( .data(oneline) )
- 你做你的操作（添加圈子，设置它们的属性等）
- 您退出并删除
现在在上面的代码中，我在绑定到数据之前使用了 .dummy selector 以避免 selecting 现有对象。正确的方法是使用 .selectAll('circle')，但在那种情况下，您只会得到一行圆圈，因为现有的圆圈每次都会重新selected .这与您自己在线路上循环的事实有关。我会尝试直接绑定到原始集合，并尝试正确使用回调函数来计算 cx 和 cy。我会自己做吗，我什至会创建一个带有 属性 x 和 y 的对象数组，这样我就可以轻松构建我的圈子（但这是个人数据设计选择）。
此外，在循环中使用变量 i 以及在计算 cx 和 cy 的回调函数中作为索引器时要小心，这可能会导致冲突。
我希望这很清楚（呃）并且它有所帮助；否则我将尝试详细说明所需的要点。