Question

请查看以下代码并建议更正为什么它什么都没有显示？

<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>

Answer 1

这有效：

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

不得不使用https

html中的d3不会产生输出，只会产生空白页面

1 个答案: