Javascript d3.js无法使用常规更新模式和转换

有人能帮我解决这个d3.js问题吗？我试图遵循博斯托克的“一般更新模式”。我做过研究，试图找到一个解决方案，但没有取得任何进展

我没有使用列和行，而是画线

该程序显示两个模式，它们是32行组合在一起的 我猜是“g”

我希望这两组线要么一组显示在另一组的上面，一组通过样式更改为不透明度而消失，要么

将剩余的一组线放置在与其他线相同的位置 第一组线消失后的第一组线（原点为0.0）

我认为问题在于如何将它们与“g”分组，而不是与am分组 不确定。我尝试了各种方法来添加div和容器， 使用转换，翻译，但什么都不起作用。我试过了 改变容器的大小，这也不起作用

我认为SVG在过渡后被移除是正常的，但我没有 了解如何“向上移动”第二组行

示例位于JSFIDLE：

谢谢你的帮助。我很喜欢学习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);

var num=0；
var宽度=660，
高度=25；
var半径=2；
d3.select（“body”）.selectAll（“h1”）.data（[{}]）
.enter（）.insert（“h1”）.html（“此处的一些文本”）
var svg=d3.选择（“#svgcontainer”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
var g=svg.append（“svg:g”）
.attr（“转换”、“翻译（0,0）”）；
函数getpatterndata（num）{
如果（num==1）{
var pdata=cellular（）；}
else{pdata=cellular2（）；}
console.log（“pdata”，pdata）；
返回pdata；
}
函数生成行（数据）{
var分录=d3分录（数据）；
var-thelines=[]；
var oneline=[]；
条目.forEach（函数（d）{
变量行=d.value.split（“”）；
推（线）；
});
//日志（“theline”，theline）；
归还电话线；
}
函数更新（行，num）{
//数据连接
//将新数据与旧元素（如果有）联接。
//更新
对于（i=0；i=0；i--）{
var oneline=thelines.pop（）；
//将行附加到容器
var sampleSVG=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，660）
.attr（“高度”，10）
.attr（“转换”、“翻译（0,0）”）；
var circles=sampleSVG.selectAll（“主体”）
.data（单线）//将是单线
.输入（）
.附加（“圆圈”）；
变量circleAttributes=圆
.attr（“cx”，函数（d，i）{return（i*10）}）
.attr（“cy”，3）
.attr（“转换”、“翻译（30,0）”）
.transition（）.持续时间（2000年）
.attr（“r”，函数（d，i）{if（+d==1）
{return r=3；}否则{return r=2；}）
.样式（“填充”，功能（d）{
颜色；
如果（+d==0）{returnColor=“lightblue”；
}如果（+d==1）{returnColor=“red”；
}else如果（+d==0）{returnColor=“green”；}
返回颜色；
});
}
}
//初始显示。
var initialpattern=[]；
var secpattern=[]；
initialpattern=getpatterndata（2）；
var thepatternrows=[]；
模式行=生成行（初始模式）；
更新（模式行，2）；
secpattern=getpatterndata（1）；
模式行=生成行（secpattern）；
更新2（模式行，1）；

---

我试图查看一下您的JSFIDLE，但d3资源似乎没有正确加载（控制台记录了一些关于加载非https资源的错误）。 我创建了一个plunker：

var num=0；
var宽度=660，
高度=800；
var半径=2；
d3.select（“body”）.selectAll（“h1”）.data（[{}]）.enter（）
.insert（“h1”）.html（“此处有一些文本”）
var svg=d3.选择（“#svgcontainer”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）；
var g=svg.append（“svg:g”）
.attr（“转换”、“翻译（0,0）”）；
函数getpatterndata（num）{
如果（num==1）{
var pdata=cellular（）；
}否则{
pdata=cellular2（）；
}
console.log（“pdata”，pdata）；
返回pdata；
}
函数生成行（数据）{
var分录=d3分录（数据）；
var-thelines=[]；
var oneline=[]；
条目.forEach（函数（d）{
变量行=d.value.split（“”）；
推（线）；
});
日志（“theline”，theline）；
归还电话线；
}
函数更新（行，num）{
//数据连接
//将新数据与旧元素（如果有）联接。
控制台日志（thelines）
//更新
对于（i=0；i=0；i--
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;

}