Question

我正在学习d3可视化库，我理解如何在html上使用它。但是我的要求是在Jade中使用库。

以html

的形式调用时，以下内容有效

//File: server.js (node)
 app.engine('html', require('ejs').renderFile);
 response.render('playg.html');

//File: play.html
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>D3.js Playground</title>
<script src="d3/d3.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/playground.css">
<style type="text/css" id="user-css"></style>
</head>
<body>
</body>
</html>

根据d3文档，我应该在Chrome控制台窗口中添加以下代码

var circleRadii = [40, 20, 10];
var svgContainer = d3.select("body").append("svg")
    .attr("width", 200)
    .attr("height", 200);
var circles = svgContainer.selectAll("circle")
    .data(circleRadii)
    .enter()
    .append("circle");
var circleAttributes = circles
    .attr("cx", 50)
    .attr("cy", 50)
    .attr("r", function (d) { return d; })
    .style("fill", function(d) {
        var returnColor;
        if (d === 40) { returnColor = "green";
        } else if (d === 20) { returnColor = "purple";
        } else if (d === 10) { returnColor = "red"; }
        return returnColor;
    });

这一切都完美无缺，并在浏览器上产生了svg同心圆。我现在决定切换到Jade，因为这是我的要求。以下代码不起作用。也没有错误。请帮忙！

//File: server.js (node)    
response.render('chartex');

//File: chartex.jade
doctype html
html(lang="en")
head
    title HEllO
    script(src='d3/d3.min.js')
    link(rel="stylesheet", href="css/playground.css", type="text/css")
body
    p Hey!
script
    var circleRadii = [40, 20, 10];
var svgContainer = d3.select("body").append("svg")
    .attr("width", 200)
    .attr("height", 200);
var circles = svgContainer.selectAll("circle")
    .data(circleRadii)
    .enter()
    .append("circle");
var circleAttributes = circles
    .attr("cx", 50)
    .attr("cy", 50)
    .attr("r", function (d) { return d; })
    .style("fill", function(d) {
        var returnColor;
        if (d === 40) { returnColor = "green";
        } else if (d === 20) { returnColor = "purple";
        } else if (d === 10) { returnColor = "red"; }
        return returnColor;
    });

在node / express中的jade文件中附加d3可视化脚本的位置

0 个答案: