Question

我对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可以使用的某些方法理解它。

Answer 1

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

或者如果你使用jQuery

var numDataPoints = $("#count").val();

Answer 2

您应该可以通过合并getElementById()和parseInt()获取Number的值：

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

10指定它在base-10中进行解析，而不是尝试猜测基数。

Answer 3

这应该可以解决问题：

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

Answer 4

您可以使用以下内容更新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/

Answer 5

http://jsfiddle.net/w6ypF/

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

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

Answer 6

你可以制作一个d3文本框，它保留相同的属性代码，例如.attr（“x”，ect），它的工作方式相同;

你可以将属性类应用于它.attr（“class”，“anyname”）以允许在d3中使用外来对象进行操作或调用对象的值（虽然目前还没有太多的文档和外来的对象似乎不允许.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调整大小来制作一个接受用户输入的不可靠的textarea :)

读取文本框的值

6 个答案: