我在本地系统中保存了一个JSON文件并创建了一个JavaScript文件,以便读取JSON文件并打印出数据.这是JSON文件:
{"resource":"A","literals":["B","C","D"]}
假设这是JSON文件的路径:/Users/Documents/workspace/test.json.
任何人都可以帮我写一段简单的代码来阅读JSON文件并在JavaScript中打印数据吗？
我正在学习本教程:> http://bl.ocks.org/mbostock/4062045,它基本上用于可视化D3 Javascript库中的Force_Directed图形.上面的链接也有代码和JSON文件.我有两个问题.我想要了解代码.但是,程序如何以这种方式在节点之间链接以及这些节点链接在一起的基础上？以下是链接和节点位置的代码:
force.on("tick", function() {
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("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
我的第二个问题:任何人都可以请我帮助我绘制一个非常简单的两个节点(圆圈)样本和这两个节点之间的一个链接,这样我就能理解这个图形是如何工作的,以及这个图形如何基于一个非常简单的JSON文件.非常感谢您的协助.
基于使用D3 Javascript从JSON文件中读取一些数据,我创建了三个节点(圆圈).这是我的代码以及JSON文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<body>
<script type="text/javascript" src="d3.v3.js"></script>
<script>
var width = 960,
height = 500;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("input.json", function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var …我试图按照这个D3 Javascript链接:> http://bl.ocks.org/mbostock/1093130来了解click事件的工作原理.不幸的是,我无法完全理解整个代码.我现在要做的是点击蓝色节点时,将显示另外两个节点及其链接.当我再次单击同一节点时,两个节点及其链接必须隐藏.如果我点击其他两个节点中的一个节点,则不会发生任何事情.
这是JSON文件:
{
"nodes": [
{
"name": "Node1",
"group": 2
},
{
"name": "Node2",
"group": 1
},
{
"name": "Node3",
"group": 1
}
],
"links": [
{
"source": 0,
"target": 1,
"value": 2
},
{
"source": 0,
"target": 2,
"value": 2
}
]
}
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<body>
<p>Are you there!!!</p>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<script>
var …当我将鼠标移动到Force-Directed Graph中的节点上时,我试图显示文本D3.js.我的问题是当我将鼠标移动到任何节点上时,会显示这些节点的所有文本.这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.nodeDetail {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
node .text {
font: 12px sans-serif;
pointer-events: none;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="d3/d3.v3.min.js charset=UTF-8"></script>
<script>
var graph = {
"nodes":[
{"name":"Myriel","group":1},
{"name":"Napoleon","group":1},
{"name":"Mlle.Baptistine","group":1},
{"name":"Mme.Magloire","group":1},
{"name":"CountessdeLo","group":1}
],
"links":[
{"source":1,"target":0,"value":1},
{"source":2,"target":0,"value":8},
{"source":3,"target":0,"value":10},
{"source":3,"target":2,"value":6},
{"source":4,"target":0,"value":1}
]
};
var width = 960,
height = 500;
var color = d3.scale.category20(); …我在defs标签内将 3 个圆圈组合在一起，以便它们可以在SVG. 我还被推荐使用该use标签，这样我就可以看到defs在SVG. 我正在创建它们并使用D3.js. 但是，我的问题是当我使用use标签时，在我看来，每次我想显示defs标签中的形状时，我都在创建一个新的 SVG 。我的问题是：有没有办法在defs不使用标签的情况下使用use标签？第二个问题是：如何在defs标签中多次显示该形状，SVG而无需SVG每次都创建一个。这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="US-ASCII">
</head>
<body>
<div id ="mainSVG">
<svg id = "packSVG" width = "1160" height = "620" style = "outline: thin solid black"
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id= "mySymbol">
<circle cx="200" cy="70" r="25" fill="red" />
<circle cx="170" cy="80" r="20" fill="red" /> …