在运行时获取数据，例如从文本框获取数据

Getting data at run time, from a text box for example

本文关键字：数据 获取 文本 运行时      更新时间：2023-09-26

我对Javascript仍然很陌生，并试图做一些事情:

我确实有一个代码，为我绘制D3.js图表，代码附在下面。

我需要的东西是能够为一些演示目的改变它，这样我可以输入一些值数据集在页面上，在一个文本框中，例如?点击一个按钮，然后根据这些值绘制图表。

当前这些值在代码中是这样硬编码的:

<script type="text/javascript">
    //Width and height
    var w = 500;
    var h = 100;
    var barPadding = 1;
    var dataset = [ 5, 10, 13, 19, 21, 11, 22, 18, 15, 13,
        11, 12, 15, 20, 18, 17, 16, 18, 23, 11 ];
    //Create SVG element
    var svg1 = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h)
    svg1.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x", function(d, i) {
                return i * (w / dataset.length);
            })
            .attr("y", function(d) {
                return h - (d * 4);
            })
            .attr("width", w / dataset.length - barPadding)
            .attr("height", function(d) {
                return d * 4;
            })
            .attr("fill", function(d) {
                return "rgb(0, 0, " + (d * 10) + ")";
            });
    svg1.selectAll("text")
            .data(dataset)
            .enter()
            .append("text")
            .text(function(d) {
                return d;
            })
            .attr("text-anchor", "middle")
            .attr("x", function(d, i) {
                return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
            })
            .attr("y", function(d) {
                return h - (d * 4) + 14;
            })
            .attr("font-family", "sans-serif")
            .attr("font-size", "11px")
            .attr("fill", "white"); 
</script>

  1. 添加一个textarea元素和一个元素来捕捉点击来更新图表。此外，有一个单独的div来包含图表，使得每次更新时更容易删除它:

    <div id="chart"></div>
<textarea id="values" rows="5"></textarea>
<a href="#" id="gen">
  Generate Chart    
</a>

  2. 用click事件&防止默认事件:

    d3.select("#gen").on("click", function(){
 d3.event.preventDefault(); 
 ...
});

  3. 删除先前存在的图表:

    d3.select("#chart svg").remove()

  4. 使用textarea中的值更新数据:

    var dataset = document.getElementById("values")
                .value
                .split(",")
                .map(function(d){return +d});

显然，这是非常脆弱的，只适合用于演示。用户输入没有被清理、验证等，但如果你只是想测试几个不同数据集的呈现，应该足够好了。

JS小提琴:http://jsfiddle.net/qfS62/

相关文章：