svg / d3中轴转换的语法 [英] Syntax for axis transition in svg/d3
问题描述
我有一个令人难以置信的基本语法问题。我一直在学习d3，SVG和Javascript主要是通过编辑别人的代码，这是具有挑战性的。
目标是更新ay轴更新数据和规模，这是基于数据。我想要轴 - 刻度和标签和所有 - 转换与数据的域。轴未更新。问题可能与范围有关，或者我引用了错误的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 ，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 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;
}
//设置此可视化
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 ）{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 ，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（）
};
//（更新θ的代码，数据，这里）
//为这个轴更新轴
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（）; //以前一直在轴更新（固定）之前
}
是 transition.select。（y axis）。call（yAxis）正确？
编辑：为了简单起见，我现在有
//更新此维度的轴
yy = makeYscale（plotMargin，thetas，xmf）;
var yAxis = d3.svg.axis（）。scale（yy）;
chart.select（y axis）。transition（）。duration（10）.call（yAxis）;
我想知道是否有某种方式（在 makeYaxis（））阻止我正确选择它。 yy 函数返回正确的值，并且数据点被正确绘制和重新缩放。
按照meetamit的建议和示例 stackoverflow.com/questions/11126207/zooming-bar-graph-with-d3-js\">在这里，我偶然发现了一个似乎是解决方案。
首先，在函数 makeYaxis（）中，我删除了 .append（g）。我还更新了类名为 yaxis 。该函数现在读为
函数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）//注释新类名
// .append（g）
.attr（transform，translate（60,1））
.call（yAxis）;
//一切如前
}
在我调用 select（。yaxis）：
.select（。yaxis）。transition（）。duration（10）.call（yAxis）;
如果任何人可以向我解释为什么这个解决方案似乎工作，我将非常感谢。
I've an incredibly basic syntax question. I've been learning d3, SVG, and Javascript mostly by editing someone else's code, which is challenging.
The goal is to update a y axis after updating the data and the scale, which is based on the data. I want the axis--ticks and labels and all--to transition with the domain of the data. The axis isn't getting updated. The problem might be related to scope, or I'm referencing the wrong SVG element. (There are actually several plots getting updated simultaneously, but I'm just focusing on the axis of one of them here.)
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)
}
Sorry I can't get this self-contained.
Is transition.select.("y axis").call(yAxis) correct? Is there anything glaringly off here?
Edit: To keep things simple, I now have
// 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);
I'm wondering if something in the way I created the axis in the first place (in makeYaxis()) prevents me from selecting it properly. The yy function is returning the right values under the hood, and the data points are getting plotted and rescaled properly. It's just that the axis is "stuck."
Following meetamit's suggestions and the example here, I have stumbled on what appears to be a solution.
First, in function makeYaxis(), I removed the line .append("g"). I also updated the class name to yaxis. The function now reads
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
}
I then added an extra period in my call to select(".yaxis"):
chart.select(".yaxis").transition().duration(10).call(yAxis);
I would be very grateful if anyone could explain to me exactly why this solution appears to work.
这篇关于svg / d3中轴转换的语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
