0

我对 Javascript、HTML、D3 非常陌生，这是一个愚蠢的问题 :)

所以我添加了一个文本框和按钮，如下所示：

<div>
  <input type="text" id="count" name="howmany">
  <input type="button" id="drawbtn" value="draw">
</div>

然后在我的<script type="text/javascript">标签内，我使用一些 D3.js 来绘制散点图。目前我显示的圈数是硬编码的。例如像这样：

var numDataPoints = 100;

所以当我点击我的按钮时，它会绘制一个散点图，上面有 100 个圆圈。我需要做的就是告诉它读取该文本框中的值并绘制与我在文本框中键入的一样多的圆圈，而不总是硬编码的 100 个圆圈。
这就是我现在要做的一切:)

注意：无论我们需要添加什么来做到这一点，还请注意它应该仍然与 IE7 和 IE8 兼容......我不想使用一些 IE7 无法理解的方法。

4

6 回答 6

3 
var numDataPoints = document.getElementById('count').value;

或者如果你使用 jQuery

var numDataPoints = $("#count").val();
于 2013-04-17T21:18:58.957 回答
2

您应该能够Number通过组合getElementById()和来获得值parseInt()：

var numDataPoints = parseInt(document.getElementById('count').value, 10);

指定它以 base-10 解析，10而不是尝试猜测基数。

于 2013-04-17T21:21:34.350 回答
1

这应该可以解决问题：

var numDataPoints = document.getElementById("count").value;
于 2013-04-17T21:18:47.497 回答
1

您可以使用以下内容更新 JS 以从 中读取<input>：

var numDataPoints = document.getElementById("count").value;

当您单击按钮时，您可以使用类似的东西来运行它：

var btn = document.getElementById("drawbtn");
btn.addEventListener("click", function() {
    var numDataPoints = document.getElementById("count").value;
    console.log(numDataPoints);
});

http://jsfiddle.net/ryanbrill/gbjqP/

于 2013-04-17T21:20:11.107 回答
1

http://jsfiddle.net/w6ypF/

您可以像这样获取“count”输入的值：

var numDataPoints = document.getElementById('count').value;
于 2013-04-17T21:23:58.260 回答
1

您可以制作一个 d3 文本框，保留相同的属性代码，例如 .attr("x", ect) 并且它的工作原理相同；

您可以将属性类应用于它 .attr("class", "anyname") 以允许使用 d3 中的外来对象来操作或调用对象的值（尽管还没有太多关于它的文档并且外来对象没有' t 似乎允许 .transition() 方法，但所有其他功能保持不变。

/*Imaging width and height being of an SVG object
width=screen.width, height=screen.height;
and rows+Cols of that of an object (using d3 conventionality
to assign document.getElementById=('inputbox').value;
amazingly adding a third dimension of selection to style='resize: none;' works

*/

var foreign1 = mainBox.append("svg:foreignObject")
.attr("width", 600).attr("height", 700).attr("x", 93).attr("y", 300).attr("rx", 20).attr("ry", 20)
.style("resize", 'none')
.append("xhtml:body")
.html("<textarea style='font: Times; resize: none; font-size: 15pt; border: 1px solid lightgray; outline: none; border-radius: 10px;' id='inputbox' class='foo' rows='13' cols='40' type='text'> Message... </textarea>");

我在 .html 和 .style 中放了一些元素，resize none 以制作一个无法调整大小的文本区域，接受用户输入:)

于 2015-07-07T09:07:50.937 回答