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

0

如果您说问题中显示的代码有效，<button>元素在元素之前<script>，那是因为<script>元素在浏览器遇到它们时执行，在解析页面时从上到下。这意味着您使用的任何 JavaScript 都只能引用页面源中较高的元素，因为浏览器还不知道后面的元素。

除非您在 DOM 完成后才调用函数中的代码，例如，如果您分配 DOM 就绪或 onload 事件处理程序，或委托的单击处理程序或其他东西。

于 2013-10-12T11:02:23.610 回答