Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Syntax for axis transition in svg/d3

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."

like image 908
Sarah Avatar asked Nov 05 '12 23:11

Sarah


People also ask

Which is the correct syntax to generate the simplest D3 js axis?

var y_axis = d3. axisLeft() . scale(scale);

How do you add transitions in Diablo 3?

To apply a transition, select elements, call selection. transition, and then make the desired changes. For example: d3.

What is D3 js axis component?

Advertisements. D3 provides functions to draw axes. An axis is made of Lines, Ticks and Labels. An axis uses a Scale, so each axis will need to be given a scale to work with.

What is D3 and SVG?

js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) standards. It is the successor to the earlier Protovis framework.


1 Answers

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.

like image 99
Sarah Avatar answered Sep 29 '22 20:09

Sarah