CODEWITHSUNDEEP
javascriptsvgd3.jstransitionaxes
orome
orome

Reputation: 48476

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

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.

Upvotes: 0

Views: 165

Answers (2)

tomtomtom
tomtomtom

Reputation: 1522

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.

Upvotes: 1

andypopa
andypopa

Reputation: 536

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?

Upvotes: 0

Related Questions