我正在通过编写基础的力导向图来学习d3.我的代码在下面.我不明白的是force.on('tick' ... 的目的
当然,如果我们使用内置类进行布局,我会认为给你的节点和链接提供d3.layout.force()就足够了,它应该能够以平衡的布局绘制图形.
如果我注释掉force.on部分('tick' ......那么我的所有圆圈和线条都会在左上角结束.内部发生的事情和svg容器中发生的事情之间是否存在差异因此我们需要force.on('tick'重绘布局以匹配每次当前的内部值集合?
var nodes = [
{},
{},
{}
];
var links = [
{'source': 0, 'target': 1}
];
// append svg element to container
var mychart = d3.select('#chart')
.append('svg')
.attr('width', w)
.attr('height', h);
// create force layout in memory
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.size([w, h]);
// append a group for each data element
var node = mychart.selectAll('circle')
.data(nodes).enter()
.append('g')
.call(force.drag);
// append circle onto each 'g' node …Run Code Online (Sandbox Code Playgroud) 我有一个人的网络.我可以通过使用Networkx创建有向图来显示它们的连接方式.
这是一个代码示例:
edges = edglist
nodes = nodelist
dg.add_weighted_edges_from(edges)
#print dg.nodes()
print nx.shortest_path(dg, source='Freda', target='Levi', weight=None)
nx.draw(dg)
plt.savefig("path.png")
Run Code Online (Sandbox Code Playgroud)
哪个产生:

我还可以计算两个节点之间的最短路径.然而,我坚持的是如何突出这个"最短路径".任何指针都将非常感激.顺便说一句,我是新手
这是我的代码片段:
我试图了解如何使用 d3 获取 DOM 对象的属性。在这种情况下,在对象返回一个事件之后。例如,我将如何访问“x1”属性。
var svg = d3.select('svg')
.append('polyline')
.attr('x1', 20)
.attr('y1', 100)
.attr('x2', 100)
.attr('y2', 100)
.attr('points', "20,100 100,100 100,100 180,100")
.attr('fill', 'none')
.attr('stroke', palette.gray)
.attr('marker-start', "url(#triangle)")
.attr('marker-mid', "url(#triangle)")
.attr('marker-end', "url(#triangle)")
.on('click', function(){
console.log('polyline click');
console.log(this);
});
Run Code Online (Sandbox Code Playgroud)
我用了
我终于发现解决方案是使用: d3.select(this).attr("cx")
什么是'这个'?如果我将“this”打印到控制台,我似乎将 DOM 对象恢复为
<polyline x1="20" y1="100" x2="100" y2="100" points="20,100 100,100 100,100 180,100" fill="none" stroke="#708284" marker-start="url(#triangle)" marker-mid="url(#triangle)" marker-end="url(#triangle)">
Run Code Online (Sandbox Code Playgroud)
不得不再次选择元素似乎有点“hacky”。我在这里错过了一个技巧吗?
我对 Javascript 很陌生,并且仍在研究创建对象的各种方法,即构造函数+new、原型、函数和部件。
我已经使用模块模式创建了一个对象工厂,并且想知道调用内部方法的正确方法是什么。是通过this还是函数名。
这是我的模块:
function chart() {
function my() {
// generate chart here, using `width` and `height`
}
my.sayHi = function(){
console.log('hi');
my.sayBye();
};
my.sayBye = function(){
console.log('Bye');
};
return my;
}
var test = chart();
test.sayHi();
Run Code Online (Sandbox Code Playgroud)
您可以看到第一个函数使用my.sayBye()调用第二个函数,或者使用this.sayBye()更好。两者产生相同的结果并且运行没有错误。
我正在为本地开发需求创建一个docker文件.该文件创建一个user帐户user作为密码.我认为应该工作的路线是:
# allow writes to the home directory
RUN echo "user" | sudo -S chmod 777 ~
Run Code Online (Sandbox Code Playgroud)
但是,当我以交互方式运行图像时,它似乎失败了,我看到了这条消息:
mkdir: cannot create directory ‘/home/.meteor-install-tmp’: Permission
denied
Run Code Online (Sandbox Code Playgroud)
当我sudo -S chmod 777 ~在容器内运行时,它可以工作.
这是完整的脚本:
# docker build -t timebandit/meteor-1-5 --rm .
# docker run -v /host/path:/home/code -it timebandit/meteor-1-5 bash
FROM ubuntu:xenial
# update the system
RUN apt-get update && apt-get -y install curl \
sudo \
apt-utils \
locales \
nano
# Set the locale
RUN sudo …Run Code Online (Sandbox Code Playgroud) 我已经从编码 Javascript 的功能风格转变为基于类的 Typescript 来工作。在某些情况下,我只需要一个实例/位置来实现某些功能,所以有时我会选择抽象类,而有时我会选择单例。我选择其中一个的原因有点武断和模糊,我同事的建议听起来也很模糊。
你什么时候会使用抽象类和单例类而不是具有公共静态方法和属性的常规类。实际示例和用例有助于决定何时使用哪个更好。
目前抽象和单身似乎与我非常相似,当涉及到创建只有一个的东西的情况时,但我选择后者的原因到现在为止只是因为我可以this.property用单身来做,而在抽象中它似乎是正确的仅使用abstractClassName.property哪个更详细。两者似乎都是集中状态的好选择,例如计时器项目的公共列表items[]
javascript ×4
d3.js ×2
docker ×1
dockerfile ×1
networkx ×1
python-2.7 ×1
svg ×1
typescript ×1
ubuntu ×1