svg / d3中軸轉換的語法

Question

我有一個非常基本的語法問題。 我一直在學習d3，SVG和Javascript，主要是通過編輯別人的代碼，這很有挑戰性。

目標是在更新數據和基於數據的比例后更新y軸。 我希望軸 - 刻度線和標簽以及所有 - 轉換為數據域。 軸未更新。 問題可能與范圍有關，或者我引用了錯誤的SVG元素。 （實際上有幾個地塊同時更新，但我只關注其中一個的軸。）

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函數返回引擎蓋下的正確值，數據點將被正確繪制和重新縮放。 只是軸被“卡住了”。

Answer 1

根據meetamit的建議和這里的例子，我偶然發現了似乎是一個解決方案。

首先，在函數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);

如果有人能夠向我解釋為什么這個解決方案似乎有效，我將非常感激。