Question

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

 Mootool 1.4.5

由于

Answer 1

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

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

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

查看here获取相同的演示，但是上面写的链接加载了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>

无法在浏览器上运行jsfiddle代码

1 个答案: