0
次のコードを見て、何も表示されない理由を訂正してください。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>
を使用していたローカル・ファイルを実行するためにWebサーバーを使用していますか？コードは正常に動作するので、https://jsfiddle.net/gerardofurtado/5uggq40f/ –
はいWebサーバーを使用しています –
有用な開発者ツールのコンソール出力はありますか？ –