如何制作d3.js饼图的单独文件并将其加载到html页面
How to make seperate file of d3.js pie chart and load it to html page
我将代码粘贴到jack.js文件
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
//Width and height
var w = 300;
var h = 300;
var dataset = [ 5, 10, 20, 45, 6, 25 ];
var outerRadius = w / 2;
var innerRadius = 0;
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var pie = d3.layout.pie();
var color = d3.scale.category10();
var svg = d3.select("body").append("svg").attr("width", w)
.attr("height", h);
var arcs = svg.selectAll("g.arc").data(pie(dataset)).enter()
.append("g").attr("class", "arc")
.attr("transform", "translate(" + outerRadius + "," +outerRadius + ")");
arcs.append("path").attr("fill", function(d, i) {
return color(i);})
.attr("d", arc).on("mouseenter", function(d) {
//console.log("mousein")
text = arcs.append("text").attr("transform", arc.centroid(d))
.attr("dy", ".5em").style("text-anchor", "middle")
.style("fill", "blue").attr("class", "on")
.text(d.data.place);})
.on("mouseout", function(d) {
text.remove();});
//Labels
arcs.append("text").attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")"; })
.attr("text-anchor", "middle").text(function(d) {
return d.value;
});</script>
并将其链接到我的HTML页面。
问题:此插孔.js文件未在 HTML 页面中显示饼图。 任何人都可以建议我应该做什么吗?
这是你想要的行为吗?普罗提
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script type="text/javascript" src="jack.js"></script>
<h1>Hello Plunker!</h1>
</body>
</html>
相关文章:
- 如何在从浏览缓存加载页面时执行javascript
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 标记的实时更新,无需加载页面谷歌地图API V3
- Javascript/Jquery/PHP加载页面-如何
- 加载页面时更改html页面的位置
- 重新加载页面时Javascript变量发生变化
- 通过浏览器加载页面时触发加载脚本(js或jQuery)'s”;返回“;作用
- $(select).selectmenu('打开')不'如果使用ajax加载页面,则不起作用
- 单击同一链接时,使Iron Router重新加载页面
- 正在尝试制作一个基本加载页面
- 强制用户重新加载页面
- HtmlUnit无法在youtube上完全加载页面
- PhantomJS并没有在每次加载页面时进行所有AJAX调用
- 任何人都知道IE7设置或更新/补丁,它可以防止IE因为jquery错误而无法加载页面
- 记住<选择>重新加载页面
- 防止用户在jQuery Mobile中ajax加载页面时单击其他位置
- 动态生成的html按钮无法加载页面
- 如何使用特定的javascript函数创建一个url,以便在加载页面时运行
- 在Chrome中重新加载页面后清除表单输入值
- 通过AJAX加载页面并执行javascript和CSS