0

p5.j​​s スケッチを介して JavaScript で呼び出している .csv ファイルがあります。フィールドの 1 つには、103 文字から 328 文字の範囲の文が含まれています。私のスクリプトはデータを呼び出し、キャンバスにランダムに表示します。一部の文章は非常に長いため、キャンバスにうまく収まらないため、2 行または 3 行の文字列に分割したいと考えています。

JavaScript のドキュメントでTemplate LiteralsとRegExpを読みましたが、すべての例で変数として書き出された文字列変数を使用しています。たとえば、私のデータの場合は次のようになります。

var myString = `We can lift up people and places who've been left out, 
        from our inner cities to Appalachia,  
        in every manufacturing town hollowed out when the factory closed, 
        every community scarred by substance abuse, 
        every home where a child goes to bed hungry.`

これTemplate Literalは、複数行のオブジェクトとしてキャンバスに印刷されます。しかし、私がする必要があるのは、JavaScript に、データ内のステートメント配列から複数行のオブジェクトを作成させることです。

文の色、サイズ、x/y 配置、および動きをフォーマットすると がconstructorあります。prototype

// Function to align statements, categories, and polarity
function Statement(category, polarity, statement) {
  this.category = category;
  this.statement = statement;
  this.polarity = polarity;
  this.x = random(width/2);
  this.y = random(height);
  this.dx = random(-speed, speed);
  this.dy = random(-speed, speed);
}
// Attach pseudo-class methods to prototype;
// Maps polarity to color and x,y to random placement on canvas
Statement.prototype.display = function() {
  this.x += this.dx;
  this.y += this.dy;
  if(this.x > width+10){
    this.x = -10
  }
  if(this.y > height+10) {
    this.y = -10
  }
  if(this.polarity == -1){
    fill(205, 38, 38);
  }
  else if(this.polarity == 1){
    fill(0, 145, 205);
  }
  else{
    fill(148, 0, 211);
  }
  textSize(14);
  text(this.statement, this.x, this.y);
}

だから私が疑問に思っているのは、データにRegExp, likeを作成してString.split("[\\r\\n]+")追加する必要があるかどうかということだ\r\nと思います。で試してみましたがStatement.display.prototype、ステートメントが読み込まれないため、スクリプト全体が壊れているように見えました。

編集:最小限の、完全な、検証可能な例を作成しなかったために釘付けになったので、この編集をいくつかの恐怖で追加しています。そうは言っても、これが私のコードの上部です。

var clContext;
var speed = 0.8;
var statements = [];
var category = [];
var canvas;



      //load the table of Clinton's words and frequencies
function preload() {
        clContext = loadTable("cl_context_rev.csv", "header");
      }

function setup() {
  canvas = createCanvas(680, 420);
  canvas.mousePressed(inWidth);
  background(51);
  // Calling noStroke once here to avoid unecessary repeated function calls
  noStroke();
  // iterate over the table rows
  for (var i = 0; i < clContext.getRowCount(); i++) {
    var category = clContext.get(i, "category");
    var statement = clContext.get(i, "statement");
    var polarity = clContext.get(i, "polarity");
    statements[i] = new Statement(category, polarity, statement);
  }
}

function draw() {
  if (mouseIsPressed) {
    background(51);
    for (var i = 0; i < statements.length; i++) {
      statements[i].display();
    }
  }
}

分割しようとしているデータ型のコンテキストを提供するためだけに追加しました。分割を行うことができるポイントが 2 つあるようです:statementセットアップで作成された配列、またはstatementsコンストラクターからの配列です。つまり、データ ファイルに移動して\n分割したい場所を追加した場合、これは 20 個のステートメントしかないので簡単ですが、RegExpこれらの行を分割する をどのように、どこで作成するのが最善でしょうか?

4

2 に答える 2

1

あなたが望むことを正確に理解しているかどうかはわかりませんが、これを使用してテンプレートから配列を取得できます

var myString = `We can lift up people and places who've been left out, 
        from our inner cities to Appalachia,  
        in every manufacturing town hollowed out when the factory closed, 
        every community scarred by substance abuse, 
        every home where a child goes to bed hungry.`
        
var array = myString.replace(/,/gi, "").split("\n").map(x => x.trim());

console.log(array);

基本的に、例のすべてのカンマを で削除し、 でreplace(/,/gi, "")分割し\n、最後にトリムしました。

于 2016-06-11T12:13:42.213 に答える