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

Question

Does anyone know how I can see the result of : http://jsfiddle.net/Wexcode/KGxHF/ in my brwoser. 有谁知道我如何在我的浏览器中看到http://jsfiddle.net/Wexcode/KGxHF/的结果。 I want to use the code but no result is shown. 我想使用代码，但没有显示结果。 What frame works and extension should I add? 我应该添加什么框架和扩展名？ What is Mootool 1.4.5 that is added on the left section of Jsfiddle? 在Jsfiddle左侧添加的Mootool 1.4.5是什么？

 Mootool 1.4.5

Thanks 谢谢

Answer 1

You need to add the script library in your page to run Mootools. 您需要在页面中添加脚本库以运行Mootools。 MooTools is a Object-Oriented JavaScript framework/library. MooTools是一个面向对象的JavaScript框架/库。

For example, insert this in the <head> tag, before other .js files that need Mootools: 例如，在需要Mootools的其他.js文件之前，将其插入<head>标记中：

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

Look here for the same demo but with Mootools loaded by the link i wrote above. 在这里寻找相同的演示，但我上面写的链接加载了Mootools。 The better though is to download the link and run the .js file from your server/computer. 更好的方法是从服务器/计算机下载链接并运行.js文件。

To run it in a page of yours you can use this code: 要在您的页面中运行它，您可以使用以下代码：

<!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 个解决方案

解决方案1
0 已采纳 2013-07-18 13:48:23

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-07-18 13:48:23

解决方案1
0 已采纳 2013-07-18 13:48:23