1

我对 Javascript 和 d3 真的很陌生，并且仍在尝试围绕语法进行思考。

我的可视化包含一条线 ( svg:line) 和一个叠加的动态直方图。该线路目前是固定的；直方图可以更新。我正在尝试找出该行的类似更新以及如何访问它。

函数直方图 (...) {
  this.create = function() {
    ...
    this.targetPDF = 数组（1,2,3）；
    this.vis = d3.select(divID)
      .append("svg:svg")
      .attr（“类”，“vis2chart”）
      .attr("宽度", width2)
      .attr("高度", height2);
    ...
    那=这；
    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 = function() {
     // 这里是我想通过 exit() 或 transform() 更新行的地方
  };
}

我的语法都不起作用，所以不值得发布它。我不知道为什么我觉得这很困难。

编辑：很抱歉，我没有将其简化为基本要素——部分原因是不确定基本要素是什么。为了回应下面的评论，我正在粘贴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()

4

0 回答 0