3

我无法看到一些潜在的大规模重构的大局。我正在寻找同时解决两个问题的解决方案（如果存在）。我已经很长时间没有在 d3 中编码了，并且从一开始就不会流利。

我创建了一个简单的 MCMC 演示。它看起来像这样： 演示图片

thetas所有数据都存在于一个尺寸为nChainsx或 2 x ...的数组中nIters（每次点击鼠标，链长都会增加）。

现在我想展示一个老化，每个链的长度都相同。对于左图，老化将以不同颜色（例如，橙色和红色）为每个链显示第一个biLength点。实际上，biLength已经存在的第一个点的颜色会有所不同。在右侧的直方图上，我希望这些点有自己对应的条形。

我应该创建一个单独的数组来保存老化，在每个图上有效地绘制两个数据容器吗？（是否有如何执行此操作的示例？）或者，是否有某种方法可以保留数据thetas但以不同方式处理子组件？（例子？）

这是一些示例代码，显示我当前的绘图方式thetas：

// 左图更新
函数移动点（）
    {
    var tmp = chart.selectAll(".vis1points").data(thetas[0], function (d, i) { return i; } );
    时间
        .enter().insert("svg:circle")
        .attr("class", "vis1points")
        .attr("cx", function (d, i) { return xx(i); })
        .attr("cy", yy)
        .attr("r", 3)
    tmp.transition()
        .duration(10)
        .attr("cx", function (d, i) { return xx(i); })
        .attr("cy", yy)
    tmp.exit()
        .transition().duration(10).attr("r",0).remove();

    如果（nChains == 2）{
        var tmp2 = chart.selectAll(".vis1points2").data(thetas[1], function (d, i) { return i; } );
        tmp2
        .enter().insert("svg:circle")
        .attr("class", "vis1points2")
        .attr("cx", function (d, i) { return xx(i); })
        .attr("cy", yy)
        .attr("r", 3)
        tmp2.transition()
        .duration(10)
        .attr("cx", function (d, i) { return xx(i); })
        .attr("cy", yy)
        tmp2.exit()
        .transition().duration(10).attr("r",0).remove();
    }
    };

轴当前thetas作为输入来推断范围和域限制。

对于右侧的直方图：

// 创造涉及...
    var dataLength = thetas[0].length;
    this.histBars = this.vis.selectAll("rect.vis2bars")
        .data(that.histVals.counts[0])
        .enter().append("svg:rect")
        .attr("class", "vis2bars")
        .attr("x", function (d, i) { return that.xx2(i); })
        .attr("y", function (d, i) { return that.yy2(that.maxDensity*(d/dataLength)/(d3.max(that.histVals.counts[0])/dataLength)); })    
        .attr("height",function (d, i) { return that.yy2(0)-that.yy2(that.maxDensity*(d/dataLength)/(d3.max(that.histVals.counts[0]) /dataLength)); })
        .attr("宽度", Math.floor(innerWidth2/numBins));
    this.histBars.transition()
        .attr("y", function (d, i) { return that.yy2(that.maxDensity*(d/dataLength)/(d3.max(that.histVals.counts[0])/dataLength)); })    
        .attr("height",function (d, i) { return that.yy2(0)-that.yy2(that.maxDensity*(d/dataLength)/(d3.max(that.histVals.counts[0]) /dataLength)); })
        .duration(dur);

和更新：

    this.update = 函数（dur2）{
    var dataLength = thetas[0].length;
    var tmp2 = this.histBars.data(this.histVals.counts[0]);
    变种 tmp3;
    if ( nChains > 1 ) { // 修复
        tmp3 = this.histBars2.data(this.histVals.counts[1]);
    }
    var that = this;
    tmp2
        。过渡（）
        .delay( 0 ) // 可以调整...
        .duration(dur2 - 10)
        .attr("y", function (d, i) { return that.yy2(that.maxDensity*(d/dataLength)/(d3.max(that.histVals.counts[0])/dataLength)); })    
        .attr("height",function (d, i) { return that.yy2(0)-that.yy2(that.maxDensity*(d/dataLength)/(d3.max(that.histVals.counts[0]) /dataLength)); });

    // 为第二个数据集添加更新
    如果 ( nChains > 1 ) {
        tmp3
        。过渡（）
        .attr("y", function (d, i) { return that.yy2(that.maxDensity*(d/dataLength)/(d3.max(that.histVals.counts[1])/dataLength)); })    
        .attr("height",function (d, i) { return that.yy2(0)-that.yy2(that.maxDensity*(d/dataLength)/(d3.max(that.histVals.counts[1]) /dataLength)); });
    }
4

1 回答 1

0

您可以在更新圈子时动态更改圈子的颜色，例如在此处：

tmp.transition()
    .duration(10)
    .attr("cx", function (d, i) { return xx(i); })
    .attr("cy", yy)
    .attr("fill", function(d) {
         if (d.isBiLengthPoint) {
              return "orange";
         } else {
              return "blue";
         }
     });

我假设目前您正在根据 CSS 为圆圈着色，但对于您想要的效果，我真的认为动态加载它们是一个更好的解决方案。

或者您可以动态更改圈子的类并声明两个 CSS 类

tmp.transition()
    .attr("class", function(d) {
         if (d.isBiLengthPoint) {
              return "vis1points-bilength";
         } else {
              return "vis1points";
         }
     })
    .duration(10)
    .attr("cx", function (d, i) { return xx(i); })
    .attr("cy", yy)

在你的 CSS 中

 vis1points {
     fill: blue;
 }
 vis1points-bilength {
     fill: orange;
 }
于 2013-09-03T09:58:51.410 回答