3

I am still very new to Javascript and trying to do something:

I do have a code that draw a D3.js chart for me, the code is attached below.

The thing I need is to be able to for some demo purposes change it such that I can enter some values as dataset on the page, in a text box for example? and hit a button and then draw the chart based on those values.

Currently these values are hard coded like this in the code:

<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. Add a textarea element and an element to catch a click to update the chart. Also, having a separate div to contain the chart makes it easier to remove it each time we update:

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

  2. Wrap the previous code with a click event & prevent default on event:

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

  3. Remove previous chart if it exists:

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

  4. Update data using values in textarea:

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

Obviously this is very brittle and only really good for a demonstration. User input is not cleaned, validated etc. but should be good enough if you just want to test the presentation of a few different data sets.

JS fiddle: http://jsfiddle.net/qfS62/

于 2013-03-25T02:12:39.173 に答える