Why won't the axes on my D3 SVG figure update?

Question

I have a simple D3 scatterplot that I switch among displaying several different attributes of my data, but while I can get the data points to change (and to transition as I want them to), and can change the labels to the figure's axes, I cannot get the axes themselves to update (let alone transition).

I suspect I'm doing something in the wrong order, or am missing a step, but I can't figure out from the documentation or examples I'm working from what I'm missing.

How do I get my axes to update along with my data?

---

The mystery arises from the behavior at the end of the linked code:

d3.select("#distancefig").on("click", function () {
    d3.event.preventDefault();
    updatePlot('distancefig', false);
});
d3.select("#speedfig").on("click", function () {
    d3.event.preventDefault();
    updatePlot('speedfig', false);
});
d3.select("#distspeedfig").on("click", function () {
    d3.event.preventDefault();
    updatePlot('distspeedfig', false);
});

updatePlot('distancefig', true);

Here the final, explicit updatePlot updates everything as expected (and changing the argument changes everything — axes, labels, points — as it should), but the calls invoked by clicking on the links change only the data points and labels; they do not update the axes.

Godbeare

you need to update the domain of the scales on the "on click" events and then redraw the axis' – Electrotechnology

FWIW, I'm new to D3 (and haven't used JavaScript in a decade!) so be gentle. I'm using this and (mostly) this as inspiration. – Godbeare

In the event triggered by the click of the text on the top (distances, speed etc) you need to update the domain of the axis', let's say your axis has "x" as a variable name, you can simply say: x.domain(insert the desired domain of the axis'); and you should be done – Electrotechnology

@tomtomtom: I do that (I think) but it only works the first time I load the page, not when I click the links. Am I doing it in the wrong place? – Godbeare

you should update the x and y domain here: d3.select("#distancefig").on("click", function (e) { //e.preventDefault(); updatePlot('distancefig', false); }); at the end of your code (and also on the other two .onclick events after this one) – Electrotechnology

@tomtomtom: The domain update code is currently inside of updatePlot, should it be in a different spot within that function? – Godbeare

can you please make a jsfiddle of the code so I can have a better look at it? in the browser's console it's not that easy to make edits – Electrotechnology

@tomtomtom: Here, though I can't get it to actually run there (perhaps the external link isn't working). – Godbeare

you need to load the external database in order to make it work – Electrotechnology

@tomtomtom: Not sure how to do that in JSFiddle. I've provided the correct URL as an argument to d3.csv. – Godbeare

I had a look at your code, honestly I'm not that familiar with that, but what I would do is put the on click of the text elements inside the callback function (right now they are outside) and then adjust the x and y domains accordingly inside the on click functions – Electrotechnology

@tomtomtom: Can you show me as an answer? – Godbeare

Answer 1

I'm not familiar with how you structured your code, but I would basically put everything that happens with the database inside the d3.csv callback function, so the final part, regarding the functionality of the text, would have the update of the x and y axis with the updated domain, like:

d3.csv{
//select the text then add the onclick event
.on("click" function () {
x.domain(d3.extent(dataset, function (d) { return /* your updated value here */); })).nice();
//select the x-axis and then add this:
        .transition()
        .duration(1500)
        .call(xAxis);
//then do the same for the y axis
};}

The critical step is to make sure that you select the axes correctly.

Electrotechnology

It turns out the answer to this question can be found here and relates (in a fashion that is mysterious to me, as well as the answerer of the question) to how I select the axes when I attempt to update them: referring to them using the variable name wasn't actually referring to the axes at all; instead it was necessary to explicitly select them. – Godbeare

Why I need to select in this way (and can't use the saved axes) is a distinct question. – Godbeare

Answer 2

In each of the click handlers you are passing "false" as the 2nd argument. In the last statement, you are passing "true". Could this be the cause?

Smallminded

Not directly. That just distinguishes between page load and subsequent updates. The question is thus, essentially, why the updates (first is false) don't update the axes. – Godbeare

But do the events fire? Like when you set a breakpoint in firebug? Alternatively, maybe you could try defining the handlers using jQuery/JS? $("#speedfig").click(function () { updatePlot('speedfig', false); }); – Smallminded

Yes, everything fires as expected (the data and labels update as the should). – Godbeare

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient reputation you will be able to comment on any post. – Innocent