15

信じられないほど基本的な構文の質問があります。私は d3、SVG、および Javascript を主に他の人のコードを編集することによって学んできましたが、これはやりがいのあることです。

目標は、データとそのデータに基づくスケールを更新した後、y 軸を更新することです。軸 (目盛りとラベル、およびすべて) をデータのドメインに合わせて遷移させたいと考えています。軸が更新されていません。問題はスコープに関連している可能性があります。または、間違った SVG 要素を参照しています。(実際には複数のプロットが同時に更新されていますが、ここではそのうちの 1 つの軸に注目しています。)

 
function makeYaxis (chart, scale, nticks, label, width, height, xmf, visName)
{
    var yAxis = d3.svg.axis()
    .scale(scale)
    .orient("left")
    .ticks(nticks);
    chart.append("svg:g")
    .attr("class","y axis")
    .append("g")
    .attr("transform","translate(60,1)") // fix magic #
    .call(yAxis);
    var xMove = xmf.yylMarginFactor * width - 1;
    var yMove = (((1 - xmf.xxbMarginFactor) * height + 
          xmf.xxtMarginFactor * height) / 2);
    chart.append("svg:text")
    .attr("class", visName + "xLabel")
    .attr("x", 0)
    .attr("y", 0)
    .attr("dy", "-2.8em")
    .text(label)
    .attr("transform", "rotate(-90) translate(-" + yMove + "," + xMove + ")");
}
function makeYscale (plotMargin, thedata, xmf)
{
    var dataMin = d3.min(thedata[0]);
    var dataMax = d3.max(thedata[0]);
    var yyMargin = d3.max([plotMargin * (dataMax - dataMin),0.05]);
    var yy = d3.scale.linear()
    .domain([dataMin - yyMargin, yyMargin + dataMax])
    .range([(1 - xmf.xxbMarginFactor) * height, xmf.xxtMarginFactor * height]);
    return yy;
}
// Set up this visualization
var chart = d3.select("#vis1")
  .append("svg:svg")
  .attr("class", "vis1chart")
  .attr("width", width)
  .attr("height", height);

var yy = makeYscale(plotMargin, thetas, xmf);

makeYaxis(chart, yy, nYTicks, "parameter", width, height, xmf, "vis1");
var points = chart.selectAll("circle.vis1points")
    .data(thetas)
    .enter().append("svg:circle")
    .attr("class", "vis1points")
    .attr("cx", function (d, i) { return xx(i); })
    .attr("cy", function (d, i) { return yy(d); })
    .attr("r", 3);
points.transition()
    .attr("cx", function (d, i) { return xx(i); })
    .attr("cy", yy)
    .duration(dur);
vis1move();
function vis1move ()
{
    function movePoints ()
    { 
    var tmp = chart.selectAll(".vis1points").data(thetas[0], function (d, i) { return i; } );
    var opa1 = points.style("stroke-opacity");
    var opa2 = points.style("fill-opacity");
    tmp
        .enter().insert("svg:circle")
        .attr("class", "vis1points")
        .attr("cx", function (d, i) { return xx(i); })
        .attr("cy", yy)
        .attr("r", 3)
        .style("stroke-opacity", opa1)
        .style("fill-opacity", opa2);
    tmp.transition()
        .duration(10)
        .attr("cx", function (d, i) { return xx(i); })
    tmp.exit()
        .transition().duration(10).attr("r",0).remove();
    };
    // (Code for updating theta, the data, goes here)
    // Update axes for this vis
    yy = makeYscale(plotMargin, thetas, xmf);
    var transition = chart.transition().duration(10);
    var yAxis = d3.svg.axis()
        .scale(yy)
        .orient("left")
        .ticks(4);
    transition.select("y axis").call(yAxis);
    movePoints(); // Previously had been before axis update (fixed)
}

申し訳ありませんが、これを自己完結させることはできません。

正しいtransition.select.("y axis").call(yAxis)ですか？ここに何かギラギラしたものはありますか？

編集：物事をシンプルにするために、私は今持っています

 // Update axes for this vis
    yy = makeYscale(plotMargin, thetas, xmf);
    var yAxis = d3.svg.axis().scale(yy);
    chart.select("y axis").transition().duration(10).call(yAxis);

makeYaxis()最初に（ で）軸を作成した方法で、軸を適切に選択できないのではないかと思っています。関数はフードのyy下で正しい値を返し、データ ポイントは適切にプロットされ、再スケーリングされます。軸が「詰まっている」だけです。

4

1 に答える 1

7

ミータミットの提案とここの例に従って、解決策と思われるものに出くわしました。

まず、関数makeYaxis()で、行を削除しました.append("g")。また、クラス名を に更新しましたyaxis。関数は現在読み取ります

function makeYaxis (chart, scale, nticks, label, width, height, xmf, visName)
{
    var yAxis = d3.svg.axis()
    .scale(scale)
    .orient("left")
    .ticks(nticks);
    chart.append("svg:g")
    .attr("class","yaxis") // note new class name
//  .append("g")
    .attr("transform","translate(60,1)") 
    .call(yAxis);
    // everything else as before
}

次に、への呼び出しに余分なピリオドを追加しましたselect(".yaxis")。

chart.select(".yaxis").transition().duration(10).call(yAxis);

このソリューションが機能しているように見える理由を誰かが正確に説明してくれたら、とても感謝しています。

于 2012-11-06T15:39:28.910 に答える