Javascript 如何在d3.js转换中正确更新输入元素的文本值

我一直在尝试，一步一步地，在d3.js可视化中转换一些非常好但静态和非d3的动态动画

（虽然与此问题没有直接关系，但原始代码“simply”-haha-接受用户提供的chordname，如“Amaj7”，将其分解为组件注释并显示相关波形。我正在尝试创建一个基于chordname数组的过渡驱动动画。）

就我而言，对于每一次成功的代码更新（到一个d3.js友好的版本），源代码都被保存下来作为与下一个代码的工作比较

在当前的代码更新中，我在尝试合并转换时遇到了一个小故障。这种转变本身已经得到了充分的证明，并且（通过记录）可以被视为如预期的那样发生

在转换过程中，所需的属性值更改（要处理的下一个chordname和立即转换的目标）失败。将以前的（工作）版本与当前版本进行比较：

初始创建，两者通用，但在单独的文件中，因此元素只能通过DOM访问

var input = container
.append("input")
.attr("class", wavebase.animation_type + "_input")
.attr("id", "chordinput")
.attr("type", "text")
.attr("value","Amaj7");

旧的

var input = document.getElementById('chordinput');

input.addEventListener('change', inputChanged, false);
inputChanged.call(input);

和（过渡前）：

让我们明确一点：上述方法有效

新的

var input = container
.select("#chordinput")

input.on('change', inputChanged, false);
inputChanged.call(input);

后来，这两个问题都没有得到解决：

input
.transition()
.text(function() {
    return (waveplot.chordname + "\x0A");
})

…这也不是：

input
.transition()
.attr("value", function() {
    return (waveplot.chordname + "\x0A");
});

..nor变量减去返回字符（“\x0A”）将导致输入元素的值字段更新。顺便说一句，waveplot.chordname的定义总是正确的

考虑到在新代码中甚至连原来的Amaj7都没有被识别，我的直觉是问题在于这行代码

input.on('change', inputChanged, false);

很明显，随着过渡的进行，我的目标是使用这条线捕捉多个事件。我没有做什么，或者做错了什么？例如，我必须使用不同的触发器（“提交”和“单击”都没有任何影响）、使用d3.dispatch（）、甚至将每个事件映射到它自己的（'change.n'）处理程序吗

注意：尽管我很想在JSFIDLE中演示这一点，但整个过程都嵌入到了一个框架中，目前称之为不切实际

谢谢

---

暴徒

这里发生了一些事情，它们都与d3没有直接关系。然而，在修复代码时，还需要注意一些与d3相关的事情，所以我在下面用斜体表示了它们

首先，设置

.text（）

对

不起作用，因为它会更改

.textContent

属性（该属性被忽略--输入元素为空）

即使在有效的文本容器元素上使用了

transition（）.text（）

，也不会看到“transition”——文本在转换延迟后会立即更改

其次，输入的

value

属性与

value

属性（即

element.value

）不同。在任何用户或脚本交互之前，该属性（将包含在标记中）定义输入元素的初始值。加载页面后更改它没有任何效果。相反，该属性定义字段的当前值，而不管您是在脚本中更改它，还是用户通过键入来更改它

查看此提琴（仅使用普通Javascript，而不是d3）：

setAttribute

调用都不会影响显示——文本框中包含“Good Stuff”——尽管如果检查DOM，您会看到属性已更改

虽然d3不经常使用，但它有一种方法可以更改选择中元素的元素属性。但是，对于转换没有等效的函数

您可以发出有效的功能请求，要求存在一个

transition.property（）

函数。根据您的示例，我当然可以看到它的一个用途--可能您有一个数字滑块或颜色输入，您希望显示的值平滑地更改，而不是立即跳转到您正在设置的值

然而，这在你的情况下仍然不起作用。假设属性转换函数的实现与属性或样式转换相同，则字符串值的默认转换会将字符串分为数字段和非数字段。非数字段立即改变，数字转换。如果你从“Cmin6”改为“Amaj7”，那会很奇怪，也很随机——你最终会得到一个类似“Amaj6.56908709860876087606”的和弦

总之：我不知道为什么要使用转换来更改文本字段，也不知道中间值是什么。如果您清楚如何计算中间值，请使用自定义tween函数直接设置

此.value

。（有关如何执行此操作的示例，请参阅我为其创建的小提琴。）否则，跳过过渡，只需使用：

input.property("value", waveplot.chordname);

---

转换直接作用于文本输入字段（而不是简单地激活背景波打印功能）的原因是，我希望用户能够输入、可视化（并最终听到）他们自己的、替代和弦，同时逐步通过和弦进行。顺便说一句，我可能已经为此奋斗了好几天：美妙的答案。与此同时，我已经能够向前迈进。我将记录最终的解决方案，一旦我有动画工作的各个方面。很高兴听到它。和弦波形是一个有趣的可视化，我一直想尝试自己，但从来没有想到它。

var i = document.getElementById("i");
i = i;
i.setAttribute("value", "Stuff");
i.value="Good Stuff";
i.setAttribute("value", "Other Stuff");

input.property("value", waveplot.chordname);