0

コードが機能しない理由を突き止めるのに何時間も費やしました。次に、ボタン コードを D3 コードの後 (最後の</script>との間</body>) から一番上 ( と の間) に<script type="text/javascript">任意に移動しました<body>。現在は機能していますが、理由はわかりません。私は二度とこの過ちを犯したくないし、将来自分自身を混乱させたくありません.

<body>
<button>Update</button> 

    <script type="text/javascript">

    var w = 500;
    var h = 500;
    var barPadding = 1;

    var dataset = [ ];

    for (var i = 0; i < 14; i++) {var newNumber = Math.round(Math.random() * 70);
    dataset.push(newNumber);}


    //Create SVG element
    var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

    //Create Scales for Data conversion
    var xScale = d3.scale.linear()
                    .domain([0, d3.max(dataset, function(d,i) {return d;})]) //input
                    .range([0,w]); // output

    var yScale = d3.scale.ordinal()
                    .domain(d3.range(dataset.length))
                    .rangeRoundBands([0, h], 0.05);     //Vertical separation + barpadding

        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x", 3)
            .attr("y", function (d,i) {return yScale(i);})
            .attr("width", function(d,i) {return xScale(d);})
            .attr("height", yScale.rangeBand())
            .attr("fill", function(d) {return "rgb(" + (d * 10) + ", 0,0 )";});

        svg.selectAll("text")
            .data(dataset)
            .enter()
            .append("text")
            .text(function(d) {return d;})
            .attr("x", function(d) {return xScale(d) -15;})
            .attr("y", function(d, i) {return yScale(i) +5 +yScale.rangeBand() / 2;})
            .attr("fill", "white")
            .attr("font-family", "sans-serif")
            .attr("text-anchor", "middle");


            //Create Data Update and transition
        d3.select("button")
            .on("click", function() {

            //New values for dataset
        dataset = [ ];

            for (var i = 0; i < 14; i++) {var newNumber = Math.round(Math.random() * 70);
                dataset.push(newNumber);}

            //Update all rects, and color gradient
        svg.selectAll("rect")
            .data(dataset)
            .transition()
            .attr("x", 3)
            .attr("width", function(d,i) {return xScale(d);})
            .attr("fill", function(d) {return "rgb(" + (d * 10) + ", 0,0 )";});

            //Update text label and position
        svg.selectAll("text")
            .data(dataset)
            .text(function(d) {return d;})
            .attr("x", function(d) {return xScale(d) -15;})
            .attr("y", function(d, i) {return yScale(i) +5 + yScale.rangeBand() / 2;});
    });


    </script>

    </body>
4

1 に答える 1