我试图将我的脚本部分分成单独的JS文件。
当前整理的文件：
<html>
<head><title>d3 Funnel Charts</title></head>
<font face="verdana"></font>
<script type="text/javascript" src="d3.v2.min.js"></script>
<script type="text/javascript" src="d3-funnel-charts.js"></script>
<link rel="stylesheet" href="style.css">
<body>
<script type="text/javascript" src="javscript.js"></script>
<div>
<div id="Container" align="center" style="border:1px solid red" position="fixed"></div>
<button value="APAC" onclick='ShowData(this)'>APAC</button>
<button value="ASEAN" onclick='ShowData(this)'>ASEAN</button>
</div>
<script type="text/javascript">
var myObj = [{
"region":"APAC",
"customers": [
{ "name":"Total customer base", "count":2000, "value":2000 },
{ "name":"Total tier 2 customer base", "count":35 ,"value":2000},
{ "name":"Total tier 3 cusomers", "count":90 ,"value":2000}
]
},
{
"region":"ASEAN",
"customers": [
{ "name":"Total customer base", "count":2000, "value":2000 },
{ "name":"Total tier 2 customer base", "count":35 ,"value":2000},
{ "name":"Total tier 3 cusomers", "count":90 ,"value":2000}
]
}
];
function addData(Array, region) {
console.log(Array);
for(var i = 0; i < myObj.length; i++) {
if(myObj[i].region == region){
for(var p=0;p<myObj[i].customers.length;p++){
var temp=[];
temp.push(myObj[i].customers[p].name,myObj[i].customers[p].count,myObj[i].customers[p].ARR);
Array.push(temp);
}
}
}
}
function ShowData(objButton){
alert(objButton.value);
var svg = d3.select("svg").remove();
var dataArray=[];
addData(dataArray,objButton.value);
dataArray.sort(function(a,b){
return b[1] - a[1];
})
var svgContainer = d3.select("Container").append("svg")
.attr("width", 600)
.attr("height", 500);
svgContainer = new FunnelChart({
data: dataArray,
bottomPct: 1/2,
});
svgContainer.draw('#Container', 4);//draw chart
}
window.onload=function(){
var dataArray=[];
addData(dataArray,"APAC");
dataArray.sort(function(a,b){
return b[1] - a[1];
})
var svgContainer = d3.select("Container").append("svg")
.attr("width", 600)
.attr("height", 500);
svgContainer = new FunnelChart({
data: dataArray,
bottomPct: 1/2,
});
svgContainer.draw('#Container', 4);//draw chart
}
</script>
</body>
</html>
新HTML文件
`<html>
<head><title>d3 Funnel Charts</title></head>
<font face="verdana"></font>
<body>
<script type="text/javascript" src="javscript.js"></script>
<div>
<div id="Container" align="center" style="border:1px solid red" position="fixed"></div>
<button value="APAC" onclick='ShowData(this)'>APAC</button>
<button value="ASEAN" onclick='ShowData(this)'>ASEAN</button>
</div>
</body>
</html>`
新JS档案
<script type="text/javascript" src="d3.v2.min.js"></script>
<script type="text/javascript" src="d3-funnel-charts.js"></script>
<script type="text/javascript">
var myObj = [{
"region":"APAC",
"customers": [
{ "name":"Total customer base", "count":2000, "ARR":2000 },
{ "name":"Handshake", "count":35 ,"ARR":2000},
{ "name":"Customer Kick off", "count":90 ,"ARR":2000}
]
},
{
"region":"ASEAN",
"customers": [
{ "name":"Total customer base", "count":2578,"ARR":2000 },
{ "name":"Handshake", "count":1500 ,"ARR":2000},
{ "name":"Customer Kick off", "count":1200 ,"ARR":2000 },
{ "name":"Hands On or Use Case Adoption Workshop", "count":1000 ,"ARR":2000 },
{ "name":"Use Case Agreed/WIP/Implemented", "count":976 ,"ARR":2000 },
{ "name":"Use Case WIP/Implemented", "count":580 ,"ARR":2000 },
{ "name":"Use Case Implemented", "count":211 ,"ARR":2000 },
{ "name":"Permanenet Use Case Implemented", "count":190 ,"ARR":2000 }
]
}
];
function addData(Array, region) {
console.log(Array);
for(var i = 0; i < myObj.length; i++) {
if(myObj[i].region == region){
for(var p=0;p<myObj[i].customers.length;p++){
var temp=[];
temp.push(myObj[i].customers[p].name,myObj[i].customers[p].count,myObj[i].customers[p].ARR);
Array.push(temp);
}
}
}
}
function ShowData(objButton){
alert(objButton.value);
var svg = d3.select("svg").remove();
var dataArray=[];
addData(dataArray,objButton.value);
dataArray.sort(function(a,b){
return b[1] - a[1];
})
var svgContainer = d3.select("Container").append("svg")
.attr("width", 600)
.attr("height", 500);
svgContainer = new FunnelChart({
data: dataArray,
bottomPct: 1/2,
});
svgContainer.draw('#Container', 4);//draw chart
}
window.onload=function(){
var dataArray=[];
addData(dataArray,"APAC");
dataArray.sort(function(a,b){
return b[1] - a[1];
})
var svgContainer = d3.select("Container").append("svg")
.attr("width", 600)
.attr("height", 500);
svgContainer = new FunnelChart({
data: dataArray,
bottomPct: 1/2,
});
svgContainer.draw('#Container', 4);//draw chart
}
</script>
但是，这似乎不起作用。关于我在分离JS和HTMl文件时做错了什么建议？
答案 0 :(得分：1)
您不应该在Javascript文件中导入脚本。它们应该在您的HTML文件中。
<script>标记是HTML结构;它不是Javascript语法的一部分。
答案 1 :(得分：0)
HTML应如下所示：
`
<html>
<head><title>d3 Funnel Charts</title></head>
<script type="text/javascript" src="javscript.js"></script>
<script type="text/javascript" src="d3.v2.min.js"></script>
<script type="text/javascript" src="d3-funnel-charts.js"></scrip
<body>
<!-- remove this <font face="verdana"></font>//-->
.js文件应该从这里开始
var myObj = [{
因为src = has / path / to / file确保你的js文件与引用它们的文件在同一个目录中