Question

我仍然是Javascript的新手并试图做点什么：

我的代码为我绘制了 D3.js图表，代码附在下面。

我需要的是能够为某些演示目的更改它，以便我可以在页面上，例如在文本框中输入一些值作为 dataset ？并点击一个按钮，然后根据这些值绘制图表。

目前，这些值在代码中硬编码如下：

<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>

Answer 1

添加textarea元素和元素以捕获单击以更新图表。此外，有一个单独的div来包含图表，每次更新时都可以更轻松地删除它：
```
<div id="chart"></div>
<textarea id="values" rows="5"></textarea>
<a href="#" id="gen">
  Generate Chart    
</a>
```

使用点击事件＆amp;防止事件违约：

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

删除上一张图表（如果存在）：
```
d3.select("#chart svg").remove()
```

使用textarea中的值更新数据：

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

显然这很脆弱，只对演示非常有用。用户输入未经过清理，验证等，但如果您只想测试几种不同数据集的表示，则应该足够好。

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

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

1 个答案: