html中的d3不會產生輸出，只能輸出一個空白頁面

請看下面的代碼並建議更正它爲什麼不顯示任何內容？html中的d3不會產生輸出，只能輸出一個空白頁面

<html> 

<meta charset="utf-8"> 

<style> 

.link { 
    fill: none; 
    stroke: #666; 
    stroke-width: 1.5px; 
    stroke-length: 20px; 
} 

.node circle { 
    fill: #ccc; 
    stroke: #fff; 
    stroke-width: 1.5px; 
} 

text { 
    font: 20px sans-serif; 
    pointer-events: none; 
} 
.kitchenware { 
    fill: green; 
} 
.food { 
    fill: blue; 
} 
.animals { 
    fill: purple; 
} 
.other { 
    fill: orange; 
} 
</style> 

<body> 

<script src="//d3js.org/d3.v3.min.js"></script> 

<script> 

var links = [ 
    {source: "puppy", target: "insectivore", dist: "5"}, {source: "garden spider", target: "insectivore", dist: "5"}, {source: "green lizard", target: "puppy", dist: "5"}, 
    {source: "green lizard", target: "garden spider", dist: "5"}, {source: "hound", target: "green lizard", dist: "5"}, {source: "basketball", target: "hound", dist: "5"}, 
    {source: "ball", target: "hound", dist: "5"}, {source: "bathtub", target: "ball", dist: "5"}, {source: "bathtub", target: "basketball", dist: "5"}, 
    <!-- --> 
    {source: "zebra", target: "bathtub", dist: "5"}, {source: "ptarmigan", target: "zebra", dist: "5"}, {source: "strawberry", target: "ptarmigan", dist: "30"}, 
    {source: "ketchup", target: "ptarmigan", dist: "30"}, 
    <!-- --> 
    {source: "chutney", target: "ketchup", dist: "5"}, {source: "chutney", target: "strawberry", dist: "5"}, {source: "cow", target: "chutney", dist: "5"}, {source: "pony", target: "chutney", dist: "5"}, 
    {source: "margarine", target: "cow", dist: "5"}, {source: "margarine", target: "pony", dist: "5"}, 
    {source: "limpa", target: "margarine", dist: "5"}, {source: "bottle", target: "limpa", dist: "5"}, {source: "shortcake", target: "bottle", dist: "5"}, 
    <!-- --> 
    {source: "pita", target: "shortcake", dist: "5"}, {source: "kangaroo", target: "pita", dist: "30"}, {source: "bannock", target: "kangaroo", dist: "30"}, {source: "chapati", target: "kangaroo", dist: "30"}, 
    {source: "salsa", target: "bannock", dist: "5"}, {source: "salsa", target: "chapati", dist: "5"}, 
    {source: "whale", target: "bannock", dist: "30"}, {source: "whale", target: "chapati", dist: "30"}, 
    <!-- --> 
    {source: "salad", target: "basket", dist: "30"}, {source: "salad", target: "building", dist: "30"}, 
    {source: "saute", target: "basket", dist: "30"}, {source: "saute", target: "building", dist: "30"}, 
    <!-- --> 
    {source: "bag", target: "salad", dist: "30"}, {source: "bag", target: "saute", dist: "30"}, 
    {source: "blackboard", target: "salad", dist: "30"}, {source: "blackboard", target: "saute", dist: "30"}, 
    {source: "box", target: "salad", dist: "30"}, {source: "box", target: "saute", dist: "30"}, 
    <!-- --> 
    {source: "roller coaster", target: "bag", dist: "5"}, {source: "roller coaster", target: "blackboard", dist: "5"}, {source: "roller coaster", target: "box", dist: "5"}, 
    {source: "pot", target: "roller coaster", dist: "5"}, 
    <!-- --> 
    {source: "goat", target: "pot", dist: "5"}, {source: "ruler", target: "goat", dist: "5"}, {source: "ruler", target: "goat", dist: "5"}, {source: "ruler", target: "goat", dist: "5"}, 
    {source: "bench", target: "ruler", dist: "5"}, {source: "bench", target: "deer", dist: "5"}, {source: "bench", target: "blackbuck", dist: "5"}, 
    <!-- --> 
    {source: "male horse", target: "bench", dist: "5"}, {source: "war horse", target: "bench", dist: "5"}, {source: "mule", target: "bench", dist: "5"}, {source: "possum", target: "bench", dist: "5"}, 
    {source: "sheep", target: "male horse", dist: "5"}, {source: "sheep", target: "war horse", dist: "5"}, {source: "sheep", target: "mule", dist: "5"}, {source: "sheep", target: "possum", dist: "5"}, 
    <!-- --> 
    {source: "sail", target: "sheep", dist: "30"}, {source: "ski", target: "sheep", dist: "30"}, {source: "rack", target: "sail", dist: "5"}, {source: "rack", target: "ski", dist: "5"}, 
    {source: "bison", target: "rack", dist: "5"}, {source: "couch", target: "rack", dist: "5"}, {source: "racket", target: "rack", dist: "5"}, 
    <!-- --> 
    {source: "table", target: "racket", dist: "5"}, {source: "toilet seat", target: "racket", dist: "5"}, {source: "stick", target: "racket", dist: "5"}, {source: "bed sheet", target: "racket", dist: "5"}, 
    {source: "elk", target: "racket", dist: "5"}, 
    <!-- --> 
    {source: "table", target: "couch", dist: "5"}, {source: "toilet seat", target: "couch", dist: "5"}, {source: "stick", target: "couch", dist: "5"}, {source: "bed sheet", target: "couch", dist: "5"}, 
    {source: "elk", target: "couch", dist: "5"}, 
    <!-- --> 
    {source: "table", target: "bison", dist: "5"}, {source: "toilet seat", target: "bison", dist: "5"}, {source: "stick", target: "bison", dist: "5"}, 
    {source: "bed sheet", target: "bison", dist: "5"}, {source: "elk", target: "bison", dist: "5"} 
]; 

var nodes = {}; 

// Compute the distinct nodes from the links. 
links.forEach(function(link) { 
    link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); 
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); 
}); 

var width = 1500, 
    height = 900; 

var force = d3.layout.force() 
    .nodes(d3.values(nodes)) 
    .links(links) 
    .size([width, height]) 
    .linkDistance(function(d){return d.dist*10;}) 
    .charge(-600) 
    .on("tick", tick) 
    .start(); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var link = svg.selectAll(".link") 
    .data(force.links()) 
    .enter().append("line") 
    .attr("class", "link"); 

var node = svg.selectAll(".node") 
    .data(force.nodes()) 
    .enter().append("g") 
    .attr("class", "node") 
    .on("mouseover", mouseover) 
    .on("mouseout", mouseout) 
    .call(force.drag); 

node.append("circle") 
    .attr("r", 8); 

node.append("text") 
    .attr("x", 12) 
    .attr("dy", ".35em") 
    .text(function(d) { return d.name; }); 

function tick() { 
    link 
     .attr("x1", function(d) { return d.source.x; }) 
     .attr("y1", function(d) { return d.source.y; }) 
     .attr("x2", function(d) { return d.target.x; }) 
     .attr("y2", function(d) { return d.target.y; }); 

    node 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
} 

function mouseover() { 
    d3.select(this).select("circle").transition() 
     .duration(750) 
     .attr("r", 16); 
} 

function mouseout() { 
    d3.select(this).select("circle").transition() 
     .duration(750) 
     .attr("r", 8); 
} 

</script> 
</body> 

</html>

來源

2016-11-22 Mona Jalal

您使用的Web服務器來運行本地文件？因爲代碼工作正常：https://jsfiddle.net/gerardofurtado/5uggq40f/ –

是的，我正在使用一個Web服務器 –

你有任何有用的開發人員工具控制檯輸出？ –

-1

這工作：

<script src="https://d3js.org/d3.v3.min.js"></script>

不得不使用https

來源

2016-11-22 02:52:40

html中的d3不會產生輸出，只能輸出一個空白頁面

回答

相關問題