javascript - Javascript d3 で svg:line を更新する

Question

私はJavascriptとd3に本当に慣れていないので、まだ構文を理解しようとしています。

ビジュアライゼーションには、線 ( svg:line) と重ね合わせた動的ヒストグラムが含まれています。行は現在修正されています。ヒストグラムを更新できます。ラインの類似の更新とそれにアクセスする方法を理解しようとしています。

関数ヒストグラム (...) {
  this.create = 関数() {
    ...
    this.targetPDF = 配列 (1,2,3);
    this.vis = d3.select(divID)
      .append("svg:svg")
      .attr("クラス", "vis2chart")
      .attr("幅", width2)
      .attr("高さ", 高さ 2);
    ...
    それ=これ;
    this.densityKernel = d3.svg.line()
     .x(function(d,i) { return that.xxTarget(i); })
     .y(function(d) { return that.yy2(d); });
    this.vis.append("svg:path").attr("d", that.densityKernel(that.targetPDF));
  };
  this.reset = 関数() {
     // ここで、exit() または transform() のいずれかによって、行を更新したいと思います
  };
}

私の構文はどれも機能していないので、投稿する価値はありません。なぜこれが難しいと思うのか、私にはわかりません。

---

編集: 申し訳ありませんが、これを必要最低限​​の要素にまで落としていません。これは、必要最小限の要素が何であるかがわからないことが原因の 1 つです。以下のコメントに応えて、以下のコードを貼り付けていyy2ますxxTarget。それらは関数を再スケーリングしており、それらの定義は行更新のコードと密接に関係していないと思われます。

this.yy2 = d3.scale.linear()
    .domain([0, that.maxDensity + d3.max([plotMargin * that.maxDensity, 0.05])])
    .range([(1 - xmf.xxbMarginFactor) * height2, xmf.xxtMarginFactor * height2]);
this.xxTarget = d3.scale.linear()
    .domain([0, numLineSegments])
    .range([xmf.yylMarginFactor * width2, (1 - xmf.yyrMarginFactor) * width2]);  

---

編集これは、d3 のアニメーション化された折れ線グラフのこの例に従って、いくつかの構文を突き刺します。この関数は、Histogram クラス関数内で定義されます。これはうまくいくようですが、どういうわけかスコープを台無しにしているのではないかと心配しています...提案をいただければ幸いです。

this.redrawDynamically = function() {
  this.vis.selectAll("path")
    .data(hist.targetPDF)
    .attr("d", hist.densityKernel(hist.targetPDF))
    .transition()
    .ease("linear")
    .duration(100)
};

アイデアは、呼び出すredrawDynamically()ことですreset()。