0

有谁知道我如何在我的浏览器中看到以下结果：http: //jsfiddle.net/Wexcode/KGxHF/。我想使用代码，但没有显示结果。我应该添加什么框架和扩展？在 Jsfiddle 左侧添加的 Mootool 1.4.5 是什么？

 Mootool 1.4.5

谢谢

4

1 回答 1

0

您需要在页面中添加脚本库才能运行 Mootools。MooTools 是一个面向对象的 JavaScript 框架/库。

例如，将其插入<head>标签中，在其他.js需要 Mootools 的文件之前：

<script type="text/javascript" src="http://mootools.net/download/get/mootools-core-1.4.5-full-nocompat.js"></script>

在此处查找相同的演示，但通过我上面写的链接加载了 Mootools。更好的是从您的服务器/计算机下载链接并运行 .js 文件。

要在您的页面中运行它，您可以使用以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<script type="text/javascript" src="http://mootools.net/download/get/mootools-core-1.4.5-full-nocompat.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
<style>
path { stroke: #000; fill: brown; stroke-width: .5px }
circle { fill: red; }
</style>
<script>
window.addEvent('domready', function() {
    var SPACING = 5;

    var data = d3.range(50).map(function(d, i) {
        return {x: i * SPACING, y: (Math.random()*100)};
    });
    var h = d3.max(data, function(d) { return d.y; }) + 15;

    /* Create the lookup table */
    var table = [];
    data.forEach(function(d) {
        table[d.x] = d.y;
    });

    var svg = d3.select("body").append("svg")
        .attr("width", 410)
        .attr("height", 125)
    .append("g")
        .attr("transform", "translate(5, 5)");

    var area = svg.selectAll("path").data([data]).enter().append("path")
        .attr(
            "d",
            d3.svg.area()
                .x(function(d) { return d.x; })
                .y0(h)        
                .y1(function(d) { return d.y; })
        );

    var circle = svg.append("circle")
        .attr("r", 3)
        .attr("display", "none");

    area
        .on("mouseover", function() { circle.attr("display", "block"); })
        .on("mousemove", update)
        .on("mouseout", function() { circle.attr("display", "none"); });

    function update() {    
        var x = d3.mouse(this)[0];
        var y;

        if ( table[x] === undefined ) {
            var lower = x - (x % SPACING);
            var upper = lower + SPACING;
            var between = d3.interpolateNumber(table[lower], table[upper]);
            y = between( (x % SPACING) / SPACING );
        } else {
            y = table[x];
        }

        circle
            .attr("cx", x)
            .attr("cy", y);
    }
});
</script>
</head>
<body>
</body>
</html>
于 2013-07-18T13:48:23.557 回答