15

我有一个非常基本的语法问题。我一直在学习 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函数在后台返回正确的值，并且数据点被正确绘制和重新缩放。只是轴“卡住了”。

4

1 回答 1

7

按照 meetamit 的建议和此处的示例，我偶然发现了一个似乎是解决方案的方法。

首先，在 function 中makeYaxis()，我删除了 line .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 回答