javascript d3可视化不加载/显示，直到点击HTML输入

javascript d3 visualization doesn't load/appear until clicking HTML input

本文关键字：输入 HTML 显示 可视化 d3 加载 javascript      更新时间：2023-09-26

我有一个d3应用程序与一个HTML数字输入。一切都像我想要的那样工作，除了可视化不会出现在浏览器中，直到我实际点击数字输入向上或向下。

我尝试用一个值设置输入:

<input type="number" min="0" max="100" step="1" value="5" id="nMinutes">

我也尝试了这个解决方案:

var hack = document.getElementById("nMinutes");
hack.value = "22";

to no avail

我遵循这个例子:http://www.d3noob.org/2014/04/using-html-inputs-with-d3js.html

小提琴在这里:http://jsfiddle.net/btsusu6v/3/注意:我使用d3.csv在我的实际应用程序:

var dataset2
    d3.csv("/assets/csv/mydata.csv", function(d) {
    dataset2=d;
})

这是我第一次冒险进入D3(和javascript的问题)，所以所有关于应用程序的一般建议(而不是100%特定于张贴的问题)是欢迎和赞赏的。

可视化似乎在输入时得到初始化。

d3.select("#nMinutes").on("input", function () {
    d3.select("svg").remove();
    buildhist(dataset2, +this.value);
});

所以只有当你点击箭头时，你的代码才会绘制图形。如果你输入:

buildhist(dataset2, 1);

在JavaScript文件的末尾，它应该像你想的那样工作

所以我过度简化了这个例子，但是从jstkim7的回答中意识到问题一定在哪里。在阅读了这篇文章后，我找到了解决方案:csv到d3.js中的数组

我必须将buildhist(dataset2, 5)包含在d3.csv函数中。像这样:

var dataset2 = d3.csv("/assets/csv/cleanTrips.csv", function(d) { dataset2=d; buildhist(dataset2, 5); });

相关文章：