为什么我的D3 SVG图上的轴不会更新？ [英] Why won't the axes on my D3 SVG figure update?

问题描述

我有一个简单的D3散点图，可以在显示我的多个不同属性之间切换数据，但是我可以得到数据点的变化（和我想要的过渡），并可以改变标签到图的轴，我不能让轴本身更新（更不用说过渡）。

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

我怀疑我以错误的顺序做事，或者缺少一个步骤，但是我无法从文档或示例中找出我正在从 m缺失。

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);

这里最终的显式 updatePlot （并且改变参数改变一切 - 轴，标签，点 - 它应该），但是通过点击链接调用的调用只改变数据点和标签;他们不更新轴。

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.

推荐答案

我不熟悉你的代码结构，这与d3.csv回调函数中的数据库发生，因此关于文本的功能的最后一部分将具有更新的域的x和y轴的更新，例如：

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.

这篇关于为什么我的D3 SVG图上的轴不会更新？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！