3

我对 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>
4

1 回答 1

2

  1. 添加一个 textarea 元素和一个元素以捕获单击以更新图表。此外，有一个单独的 div 来包含图表可以更容易地在每次更新时删除它：

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

  2. 用点击事件包装前面的代码并防止默认事件：

    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/

于 2013-03-25T02:12:39.173 回答