天道酬勤,学无止境

How do I replace a node with an image using D3 and CoffeeScript for a network visualization?

I've been attempting to solve this problem for days, and am completely stumped.

I'm using this network implementation walk-through: http://flowingdata.com/2012/08/02/how-to-make-an-interactive-network-visualization/

enter image description here

I have successfully created my visualization through this walk-through, and now would like to replace a node with a small picture, based on the node's value.

This is a great example of code to work from, where every node was replaced with an image. http: //bl.ocks .org/mbostock/950642

Specifically:

node.append("image")
.attr("xlink:href", "https://github.com/favicon.ico")
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16);

The only issue is that this code is in JavaScript, and my implementation of the network graph is written in CoffeeScript.

I tried creating my own JavaScript file with the code above and linking to it, however this did not work for me, and quite frankly I don't know if that is the best approach to take anyway.

I tried converting the code from JavaScript into CoffeeScript through this JS to CoffeeScript tool, http://js2coffee.org/, however I am not familiar with CoffeeScript enough to add the code in the correct location... and I feel like I've tried every spot with no luck.

What I'm exactly trying to do is to put a specific picture in place of a node based on the data contained by the node. I would prefer to have an if statement in the CoffeeScript itself to insert a picture based on the node selected, (could be the name or group or whatever.) I would also like to have the text label for each node as well, displaying, say, "amount," however I still need to research more on how to do that one.

Sample node:

"nodes" : [{
"match" : "1.0",
"name" : "Airplane",
"virtualAmount" : "1000",
"artist" : "Airplane",
"amount" : "999.99",
"id" : "a1234",
"playcount" : "500",
"group" : "airplanePic.jpg"
}, {

Thanks! Any help would be very much appreciated!

Edit: (with my code)

Thank you Lars, I was unaware of the inability to use an image with an SVG. Here is the code I am working with:

This is the CoffeeScript section that I believe I need to edit to get my desired SVG file to replace what is currently a circle for a node.

# enter/exit display for nodes
updateNodes = () ->
  node = nodesG.selectAll("circle.node")
    .data(curNodesData, (d) -> d.id)

node.enter().append("circle")
  .attr("class", "node")
  .attr("cx", (d) -> d.x)
  .attr("cy", (d) -> d.y)
  .attr("r", (d) -> d.radius)
  .style("fill", (d) -> nodeColors(d.artist))
  .style("stroke", (d) -> strokeFor(d))
  .style("stroke-width", 1.0)

I have been trying to use an if statement, like this, however I'm new to CoffeeScript so be gentle.

if d.group is "airplane"     #comment: or whatever group name I'm looking for
.attr("src", "tinyWhale.jpg")

However, I'm now aware that this won't work since I can't import an image to an SVG. I'm still very confused as to how to replace the node with an SVG, even after reading Lar's comment and linked question.

Would I be able to just create an if statement and replace the circle with a googled svg file?

Thanks again for the help.

Update 2: Thanks so much Lars, I am trying to add this to the vis.coffee file, however it breaks when I add any of the code. Here is how I am adding the code:

The 4th .attr is the code added.

node.enter().append("circle")
  .attr("class", "node")
  .attr("cx", (d) -> d.x)
  .attr("cy", (d) -> d.y)
  .attr("r", (d) -> d.radius) #this is the code added
  .attr("fill", (d) -> "url(#" + d.group + ")")
  .style("fill", (d) -> nodeColors(d.artist))
  .style("stroke", (d) -> strokeFor(d))
  .style("stroke-width", 1.0)

And I added this here, which also breaks the code. Am I putting this in the entirely wrong spot?

# Starting point for network visualization
# Initializes visualization and starts force layout
network = (selection, data) ->
# format our data
allData = setupData(data)

# create our svg and groups
vis = d3.select(selection).append("svg")
  .attr("width", width)
  .attr("height", height)
linksG = vis.append("g").attr("id", "links")
nodesG = vis.append("g").attr("id", "nodes")

defs = svg.append("defs")

defs.selectAll("pattern")
  .data(curNodesData)
  .append("pattern")
  .attr("id", (d) -> d.group)
  .append("image")
  .attr("xlink:href", (d) -> d.group)

Thanks for your help and patience!

Here is my vis.coffee file: https:// dl.dropboxusercontent .com/u/18496047/vis.coffee Added spaces because it won't let me have more than one link in the question.

Edit 3: Using this to go off of, which I hope will help me figure out the CoffeeScript node implementation.

# create node objects from original data
# that will serve as the data behind each
# bubble in the vis, then add each node
# to @nodes to be used later
create_nodes: () =>
  @data.forEach (d) =>
    node = {
      id: d.id
      radius: @radius_scale(d.total_amount)
      value: d.total_amount
      name: d.tweet_rate
      org: d.organization
      group: d.tweet_amount
      top_conv: d.top_conv
      x: Math.random() * 900
      y: Math.random() * 800
    }
    @nodes.push node

  @nodes.sort (a,b) -> b.value - a.value


# create svg at #vis and then 
# create circle representation for each node
create_vis: () =>
  @vis = d3.select("#vis").append("svg")
    .attr("width", @width)
    .attr("height", @height)
    .attr("id", "svg_vis")

  @circles = @vis.selectAll("circle")
    .data(@nodes, (d) -> d.id)

  # used because we need 'this' in the 
  # mouse callbacks
  that = this

  # radius will be set to 0 initially.
  # see transition below
  @circles.enter().append("circle")
    .attr("r", 0)
    .attr("fill", (d) => @fill_color(d.group))
    .attr("stroke-width", 2)
    .attr("stroke", (d) => d3.rgb(@fill_color(d.group)).brighter(5))
    .attr("id", (d) -> "bubble_#{d.id}")
    .on("mouseover", (d,i) -> that.show_details(d,i,this))
    .on("mouseout", (d,i) -> that.hide_details(d,i,this))

  # Fancy transition to make bubbles appear, ending with the
  # correct radius
  @circles.transition().duration(2000).attr("r", (d) -> d.radius)

Edit 4:

I converted the CoffeeSctipt to JavaScript for readability and my own comfortability.

Any answers can be contributed via JS or CoffeeScript.

Thanks... this problem is killing me.

Anyone who wants to help: plnkr.co/edit/DeI4a0gjg0p8ypRS2HUn?p=preview

评论

Why not replacing circles with your image:

node.enter().append("image")
  .attr("class", "node")
  .attr("href", "tinyWhale.jpg")
  .attr("x", function(d) { return d.x;})
  .attr("y", function(d) { return d.y;})
  .attr("width", function(d) { return d.radius;})
  .attr("height", function(d) { return d.radius;})

instead of:

node.enter().append('circle')...

You can't use images like that directly in SVG, you need to define them as a pattern. See this question for more information. You haven't shown us your code, but I suspect that this is the source of your problem.

What you need to do is append a pattern for each image you need to the defs section of the SVG and then reference those patterns when you add the node. The code would look something like this.

defs = svg.append("defs")
defs.selectAll("pattern")
    .data(curNodesData)
    .append("pattern")
    .attr("id", (d) -> d.group)
    .append("image")
    .attr("xlink:href", (d) -> d.group)

You may need to set the dimensions for the patterns and images. Then later you can do the following

node.enter().append("circle")
    .attr("fill", (d) -> "url(#" + d.group + ")")

You may need to adjust the way the pattern IDs are generated, especially if you start using absolute URLs.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 如何管理客户端JavaScript依赖关系? [关闭](How to manage client-side JavaScript dependencies? [closed])
    问题 关闭。 此问题不符合堆栈溢出准则。 它当前不接受答案。 想要改善这个问题吗? 更新问题,使它成为Stack Overflow的主题。 4年前关闭。 改善这个问题 尽管有很好的解决方案来管理服务器端的依赖关系,但我找不到满足我一致的客户端JavaScript依赖关系管理工作流的所有需求的解决方案。 我要满足以下5个要求: 以类似于npm的package.json或bower的bower.json的格式管理我的客户端依赖bower.json 它应该可以灵活地指向我的dependency.json文件中的git repo或实际的js文件(在Web或本地)(针对鲜为人知的库)(npm可让您指向git repos) 它应该将所有库最小化并命名为一个文件,例如ender-这是我唯一需要在客户端的<script>标记中放入的js文件。 它应该像BoxJS4这样对CoffeeScript具有开箱即用的支持(现已停用) 在浏览器中,我应该能够使用任一require样式: var $ = require('jquery'); var _ = require('underscore'); 或更妙的是,使用headjs样式: head.js(['jquery', 'underscore', 'mylib'], function($, _, mylib) { // executed when all
  • 在系统重启时自动永远永久启动(节点)(Automatically start forever (node) on system restart)
    问题 我正在使用节点的永久模块来保持节点服务器运行。 但是,当系统重新启动时,永久终止。 系统重启时,有什么方法可以自动(永久)自动启动节点服务器? 回答1 我建议使用crontab。 易于使用。 如何 要开始编辑,请运行以下操作,将“ testuser”替换为所需的节点进程运行时用户。 如果您选择自己以外的其他用户,则必须使用sudo运行它。 $ crontab -u testuser -e 如果您以前从未做过此操作,它将询问您希望使用哪个编辑器。 我喜欢vim,但会推荐使用nano以便于使用。 进入编辑器后,添加以下行: @reboot /usr/local/bin/forever start /your/path/to/your/app.js 保存文件。 您应该获得有关已安装cron的一些反馈。 为了进一步确认cron的安装,请执行以下操作(再次用目标用户名替换“ testuser”)以列出当前安装的cron: $ crontab -u testuser -l 请注意,我认为在cron中执行二进制文件时应始终使用完整路径。 另外,如果永久脚本的路径不正确,请永久运行which forever脚本以获取完整路径。 鉴于forever调用node ,您可能还需要提供到node的完整路径: @reboot /usr/local/bin/forever start -c /usr
  • 各种开发测试相关免费学习书籍
    https://github.com/EbookFoundation/free-programming-books/blob/master/free-programming-books-zh.md 免费编程相关学习书籍 [ 您没有编辑权限 ] 摘要:各种开发测试相关免费学习书籍 语言无关 IDE [IntelliJ IDEA 简体中文专题教程](https://github.com/judasn/IntelliJ-IDEA-Tutorial) MySQL [21分钟MySQL入门教程](http://www.cnblogs.com/mr-wid/archive/2013/05/09/3068229.html) [MySQL索引背后的数据结构及算法原理](http://blog.codinglabs.org/articles/theory-of-mysql-index.html) NoSQL [Disque 使用教程](http://disquebook.com) [Neo4j .rb 中文資源](http://neo4j.tw) [Redis 命令参考](http://redisdoc.com) [Redis 设计与实现](http://redisbook.com) [The Little MongoDB Book](https://github.com/justinyhuang
  • (一)OpenStack---M版---双节点搭建---基础环境配置
    ↓↓↓↓↓↓↓↓视频已上线B站↓↓↓↓↓↓↓↓ 》》》》》》传送门 配置如下 本次搭建采用2台4核4G的虚拟机,也可以用2台2核4G 主机名配置网络Controller4核4GInterface1 192.168.100.10/24Interface2 192.168.200.10/24Compute4核4GInterface1 192.168.100.20/24Interface2 192.168.200.20/24 CentOS7.2镜像: 传送门: 官网 百度网盘 提取码:zytq Mitaka镜像 传送门:百度网盘 提取码: e77c SecureCRTSecureFX+x64+7.0.0.326 百度网盘 链接: 提取码:v591 网络拓扑图 1.创建虚拟机 2.设置网卡名(可选) 3.设置IP地址,并重启网卡使其生效 4.关闭防火墙,关闭防火墙自启,设置SeLinux模块为Permission,删除原有在线源 5.配置yum源,并传输镜像文件到 6.创建镜像文件挂载目录,挂载镜像,并更新yum源 7.修改主机名 8.配置域名解析(Controller 和 Compute节点都需要设置) 9.测试虚拟机互通 10.Controller节点安装vsftpd服务并配置启动 11.安装Openstack包(两个节点都需要执行) 12.设置NTP时间同步服务器以及时间同步 1
  • 用虚拟机搭建Kubernetes集群
    一、Docker到底做了什么: docker就是个容器服务。一个轻量级的,在宿主机(比如你的云服务器centos或ubuntu虚机)基础上建立的一个隔离的主机环境,我们把这个隔离的虚拟主机环境叫容器。跟传统的虚拟机相比,docker最大的区别就是它复用了外部物理宿主机内核,所以很轻量。docker主要解决了开发与部署时的环境冲突问题以及部署项目的成本问题: 1、保证部署和开发环境一样 :docker环境 2、任何语言写的程序+程序的依赖环境都被封装打包为 : docker镜像 3、所有程序都通过统一的docker命令将镜像运行成:docker容器 二、Dockerfile: 一切镜像都是基于Dockerfile来构建的,除了使用官方或别人的镜像,你也可以自己编写Dockerfile构建镜像,Dockerfile是个特殊的文本文件,就叫Dockerfile名称不能随便取。 三、裸跑docker的痛点: 1、单机使用,无法有效集群。 2、随着容器数量上升,管理成本攀升。 3、没有有效的容灾/自愈机制,容器死了你只能手动重启或新建。 4、没有预设编排模板,无法实现快速、大规模容器调度。 5、没有统一的配置管理中心工具。 6、没有容器生命周期的管理工具。 7、没有图形化运维管理工具。 综上所诉,当容器量上升之后,我们需要一套容器编排工具
  • 淡化部队布局的初始滴答声(Calm down initial tick of a force layout)
    问题 我刚刚开始涉猎d3,发现学习曲线相当陡峭。 这个过程与我以前所用的完全不同,数学在很大程度上困扰着我。 无论如何,我的项目都包含一个表示系统之间集成图的强制布局。 这部分的效果非常好,但是我确实有一个主要的担忧,这在Michael Bostocks网站上的强制布局演示中也得到了体现:当节点启动时,它们似乎是在画布上渲染的。 此后,一些严肃的物理数学接手了,模拟了引力,该引力使节点在一条相当混乱的路径上来回移动,直到它们平静下来并稳定在一些随机坐标上为止。 尽管这些运行在第一次运行演示时就非常酷,但是当您尝试从一家公司查看该公司管理的网络接口的状态并且服务器不会停滞不前时,它会在一段时间后变得很累。 我确定我已经为该项目设置了正确的布局,因为我确实希望服务器自动布局,所以我希望可视化它们之间的链接。 但是,我对引力的影响是矛盾的。 我想知道; 是否可以手动设置每个节点的初始位置,以便使它们更靠近重力中心并稍微缩短“弹跳时间”? 回答1 以上所有答案都误解了ØysteinAmundsen的问题。 稳定作用力的唯一方法是设置node.x和node.ya适当的值。 请注意,该节点是d3.js的数据,而不是表示的DOM类型。 例如,如果您加载 nodes = [{"id": a}, {"id": b}, {"id": c}] 进入 d3.layout.force().nodes
  • 容器化Kubernetes(k8s)
    1、Kubernetes概述 1.1、Kubernetes介绍 1.1.1、Kubernetes是什么及作用 Kubernetes(K8S)是Google在2014年发布的一个开源项目,用于自动化容器化应用程序的部署、扩展和管理。Kubernetes通常结合docker容器工作,并且整合多个运行着docker容器的主机集群。 官网地址:https://Kubernetes.io 中文社区 https://www.kubernetes.org.cn/docs Kubernetes的目标是让部署容器化的应用简单并且高效,Kubernetes一个核心特点就是能够自主的管理容器来保证云平台中的容器按照用户的期望运行。以下是Kubernetes相关特性: 自动包装 根据资源需求和其他约束自动放置容器,同时不会牺牲可用性,混合关键和最大努力的工作负载,以提高资源利用率并节省更多资源。横向缩放 使用简单的命令或 UI,或者根据 CPU 的使用情况自动调整应用程序副本数。自动部署和回滚 Kubernetes 逐渐部署对应用程序或其配置的更改,同时监视应用程序运行状况,以确保它不会同时终止所有实例。 如果出现问题,Kubernetes会为您恢复更改,利用日益增长的部署解决方案的生态系统。存储编排 自动安装您所选择的存储系统,无论是本地存储,如公有云提供商 GCP 或 AWS, 还是网络存储系统
  • Kubernetes学习笔记
    一、Kubernetes概述 1.1 Kubernetes介绍 1.1.1 Kubernetes是什么及作用 Kubernetes(K8S)用于自动化容器化应用程序的部署、扩展和管理 Kubernetes通常结合docker容器工作,并且整合多个运行着docker容器的主机集群。 官网地址:https://Kubernetes.io 中文社区:https://www.kubernetes.org.cn/docs Kubernetes的目标是让部署容器化的应用简单并且高效,Kubernetes一个核心特点就是能够自主的管理容器来保证云平台中的容器按照用户的期望运行 以下是Kubernetes相关特性: 自动包装 根据资源需求和其他约束自动放置容器,同时不会牺牲可用性,混合关键和最大努力的工作负载,以提高资源利用率并节省更多资源 横向缩放 使用简单的命令或UI,或者根据CPU的使用情况自动调整应用程序副本数 自动部署和回滚 Kubernetes逐渐部署对应用程序或其配置的更改,同时监视应用程序运行状况,以确保它不会同时终止所有实例,如果出现问题,Kubernetes会恢复更改,利用日益增长的部署解决方案的生态系统 存储编排 自动安装所选择的存储系统,无论是本地存储,如公有云提供商GCP或AWS,还是网络存储系统NFS,iSCSI,Gluster,Ceph,Cinder或Flocker
  • 基于阿里云ECS服务器的k8s集群环境搭建
    前言: 网上搭建k8s的文章很多,但很多都无法按其说明在阿里云ecs服务器成功搭建,所以我就花了些时间基于自己成功搭建k8s的步骤写了个 操作手册,希望对想搭建k8s环境的盆友有所帮助。 声明: 由于本人对k8s不是很熟悉,大部分也是参考别人的文章而写,再次对同行的分享表示感谢. 1. 集群信息: master01 : 39.100.137.XX (172.26.214.XX) slave1: 39.98.155.XX (172.26.214.XX) slave2: 39.98.154.XX (172.26.214.XX) 2. 设置主机名: master, slave均需配置 #master执行 >vi /etc/sysconfig/network HOSTNAME=master01 #slave1执行 >vi /etc/sysconfig/network HOSTNAME=master01 #slave2执行 >vi /etc/sysconfig/network HOSTNAME=slave02 3. 设置主机名与ip的对应关系: master, slave均需配置 >cat /etc/hosts 172.26.214.XX master01 172.26.214.XX slave01 172.26.214.XX slave02 4. 关闭swap:master
  • 如何在ember cli app中使用第三方npm软件包(How to use third party npm packages with ember cli app)
    问题 编辑:这实际上是关于任何不旨在与ember一起播放的npm软件包。 就我而言,我试图使crypto-js正常工作,但对于不是专门为ember cli设计的npm软件包,这似乎总是同样的麻烦。 我想在我的ember应用程序中使用cryptoJS,目前正在使用ember cli对其进行重构,但是在导入所有我已经在使用的第三方软件包和库时遇到很多麻烦,例如cryptoJS。 CryptoJS至少有一个用于npm的软件包,我什至不想考虑如果我所包含的某些库没有软件包会发生什么... 我只是错过了ember-cli文档中的要点,还是真的没有描述如何导入其他npm软件包以及如何正确包含非软件包库以使它们处于版本控制和依赖项控制之下? 如果我遵循crypto-js软件包手册的描述: var CryptoJS = require("crypto-js"); console.log(CryptoJS.HmacSHA1("Message", "Key")); 我的ember build出现错误 utils/customauthorizer.js: line 1, col 16, 'require' is not defined. 感谢您对此的任何帮助,我对ember cli项目感到非常兴奋,但是到目前为止,导入我现有的ember应用程序还是很痛苦的... 编辑: 不幸的是,仅导入是行不通的。
  • 图嵌入模型综述
    最近在学习Embedding相关的知识的时候看到了一篇关于图嵌入的综述,觉得写的不错便把文章中的一部分翻译了出来。因自身水平有限,文中难免存在一些纰漏,欢迎发现的知友在评论区中指正。 目录 一、图嵌入概述 二、图嵌入的挑战 三、图嵌入的方法 1.基于因子分解 2.基于word2vec思路 3.基于深度学习 4.混合方法 一、图嵌入概述 图,如社交网络、单词共存网络和通信网络,广泛地存在于各种现实应用中。通过对它们的分析,我们可以深入了解社会结构、语言和不同的交流模式,因此图一直是学界研究的热点。图分析任务可以大致抽象为以下四类: ( a )节点分类,( b )链接预测,( c )聚类,以及( d )可视化。其中,节点分类旨在基于其他标记的节点和网络拓扑来确定节点的标签(也称为顶点)。链路预测是指预测缺失链路或未来可能出现的链路的任务。聚类用于发现相似节点的子集,并将它们分组在一起;最后,可视化有助于深入了解网络结构。 真实的图(网络)往往是高维、难以处理的,20世纪初,研究人员发明了图形嵌入算法,作为降维技术的一部分。他们首先根据实际问题构造一个D维空间中的图,然后将图的节点嵌入到d(d<<D)维向量空间中。嵌入的思想是在向量空间中保持连接的节点彼此靠近。拉普拉斯特征映射(Laplacian Eigenmaps)和局部线性嵌入(Locally Linear Embedding
  • d3的多个实例强制在同一页面上布局(Multiple instances of d3 force layout on the same page)
    问题 我的目标是使用d3强制布局来显示共享相同节点的两个不同网络。 例如,在四个人中,您可以定义一个社交网络和家谱网络; 节点将是相同的(人),但链接(关系)可能是不同的。 尽管创建了两个单独的力布局,两个单独的svg画布,并且试图定义单独的变量,但这些节点共享x和y位置信息。 这是一个最小的示例,其中在一个网络上拖动节点会更改其在另一个网络中的位置:http://amath.colorado.edu/student/larremore/nodesSharingPositiond3 在下面,我张贴了一个用于创建网络之一的函数,用于创建另一个网络的代码非常相似,但是在所有实例中使用不同的变量名。 用于创建两个网络的注释代码可以在http://amath.colorado.edu/student/larremore/nodesSharingPositiond3/lib/minimal.js中找到,用于定义变量的脚本可以在/driver/minimalScript.js中找到< -我的信誉不足,无法直接将其链接。 我很抱歉! 在d3.force工作方式的某个位置,位置信息是全局的或正在全局选择的,等等。 有人可以阐明这一点吗? 我既对保持位置信息分离的解决方案感兴趣,又对理解d3.force如何处理和更新位置计算感兴趣。 function makeYNet() { // This
  • 如何为现有Docker容器分配端口映射?(How do I assign a port mapping to an existing Docker container?)
    问题 我不确定是否在这里误解了某些内容,但是似乎只能通过从映像创建新容器来设置端口映射。 有没有一种方法可以将端口映射分配给现有的Docker容器? 回答1 您可以通过直接编辑更改端口映射hostconfig.json在文件/var/lib/docker/containers/[hash_of_the_container]/hostconfig.json或/var/snap/docker/common/var-lib-docker/containers/[hash_of_the_container]/hostconfig.json如果您安装了Docker的话,我相信[ /var/snap/docker/common/var-lib-docker/containers/[hash_of_the_container]/hostconfig.json 。 您可以通过docker docker inspect <container_name>命令确定[hash_of_the_container],并且“ Id”字段的值是哈希值。 停止容器( docker stop <container_name> )。 停止docker服务(根据Tacsiazuma的评论) 更改文件。 重新启动您的Docker引擎(以刷新/清除配置缓存)。 启动容器( docker start <container
  • 手把手教你构建 Kubernetes 1.8 + Flannel 网络(一)
    环境说明 操作系统:CentOS7Kubernetes版本:v1.8.4Docker版本:v17.06-ceFlannel 版本: flannel-v0.9.1 Ntp 服务器配置 时间同步很重要 [root@node1 ~]# yum install ntp-server -y [root@node1 ~]# systemctl start ntpd && systemctl enable ntpd # yum install ntpdate -y #重要:时间同步 (每个节点都要操作否则会有意想不到的惊喜) # echo “*/5 * * * * /usr/sbin/ntpdate 192.168.31.221 > /dev/null 2>&1 &” >>/etc/crontab # /usr/sbin/ntpdate 192.168.31.221 #手动同步一次 角色 IP 组件 maser 192.168.31.221 kube-apiserver kube-controller-manager kube-scheduler Flannel kubelet Node1 192.168.31.222 kube-proxy docker Flannel kubelet Node2 192.168.31.223 kube-proxy kubelet kubelet
  • D3.js如何将力布局的节点排列在一个圆上(D3.js how do I arrange nodes of a force layout to be on a circle)
    问题 我已经开发出一种部队布局来代表社会群体之间的关系。 现在,我想使节点通过链接连接成一个圆圈分布。 做这个的最好方式是什么? 代码的完整版本(无数据)在此处http://jsfiddle.net/PatriciaW/zZSJT/(为什么我也必须在此处包含代码?这是主要部分) d3.json("/relationships?nocache=" + (new Date()).getTime(),function(error,members){ var links=members.organizations.map(function(members) { return members.member; }); var nodes = {}; links.forEach(function(link) { link.source = nodes[link.xsource] || (nodes[link.xsource] = {source: link.xsource, name: link.xsource, category: link.categorysource, path: link.pathsource, desc: link.descsource, title: link.titlesource}); link.target = nodes[link.xtarget] ||
  • 使用docker搭建redis集群(两种方式)
    文章目录 前言第一种:端口映射第二种:端口直接访问后记 前言 前面我已经完成了对于Mysql数据库集群的搭建,这里来完成对Redis数据库集群的搭建。这里就提供两种关于redis集群的搭建: 在docker中使用端口映射的技术,何为端口映射,就是说当我们建立完成redis集群以后,在使用RDM(Redis客户端)访问时候访问地址类似于 172.18.0.1:6379,172.18.0.2:6379,172.18.0.3:6379,就是说我们在访问时候端口还是6379,因为docker将内部的reids端口都映射到同一个端口进行访问处理。第二种就是使用到主机的ip地址然后分配端口号,这个就拿阿里云linux服务器来举例子,可以使用自己云服务器的公网IP地址,配置上不同的端口号,这个时候可能就需要进行安全组配置的端口开放(自己的云主机的运行的小伙伴应该也都知道如何配置)具体讲到会具体讲解。就例如访问为为 121.199.2.34:9001,121.199.2.34:9002等。 第一种:端口映射 我们可以使用到docker search redis来查询与redis相关联的镜像文件,使用 docker pull 拉取下来,但是这个时候就是最为原始的redis配置,我们在进行到配置的时候就可能会出现问题,所以这里我们输入这条命令: docker pull yyyyttttwwww
  • 带你搭建一下虚拟机和Redis集群,记得收藏
    前言: 我们看到分析 Redis 使用或原理的文章不少,但是完整搭建一套独立的 redis 集群环境的介绍,并不是很多或者说还不够详细。 那么,本文会手把手带着大家搭建一套 Redis 集群环境,Redis 集群在公司内部生产环境,大都是使用 Linux 操作系统搭建的。 所以,本文也带领大家搭建一套虚拟机环境,虚拟机中安装 Linux,常用的 Linux 操作系统如 Ubuntu、CentOS、Redhat等等。 正好我的笔记本上以前下载过 CentOS 镜像,所以咱们就使用 CentOS 来安装操作系统,步骤也很简单,下面会具体介绍。 搭建虚拟机环境: 如果你在公司,也可以使用公司内部现成的虚拟机来安装,但是如果你不在公司了,因为公司环境本身的限制,可能你得连接公司的VPN才可以访问公司内的服务器,并不是很方便。 所以,不如自己本机搭建个虚拟机环境,只要有操作系统镜像,任由你安装,使用和管理起来都比较方便。 本人使用的 MAC OS,MAC OS 本身就是 Unix 内核的桌面版操作系统,所以如果你的电脑是 MAC,也可以直接搭建 Redis 集群了,但是目前来看大部分同学还是使用 Windows 操作系统的居多,考虑到这一点,还是安装个虚拟机更为方便。 虚拟机可以选择 Oracle 开源的免费虚拟机软件 VirtualBox,我在使用过程中目前暂时没有发现 MAC OS
  • 在世界地图上方可视化网络[关闭](Visualize network above a world map [closed])
    问题 关闭。 这个问题需要更加集中。 它目前不接受答案。 想改善这个问题吗? 更新问题,使其仅通过编辑这篇文章来关注一个问题。 1 年前关闭。 改进这个问题 好吧,我在 NodeXL 中有一个网络数据集,我正在尝试在世界地图上对其进行可视化。 我的数据集有 具有国家属性的节点链接。 节点之间的未加权连接 我尝试使用 NodeXL 来完成并导出文件并导入到 Gephi。 但是,我找不到一种方法在基于节点属性的世界地图上对其进行可视化。 另外,我了解 D3.js,但在地图上找不到任何有关网络的示例或教程。 能否请您向我提供 NodeXL、Gephi、D3.js 或任何其他库中的示例来执行此操作。 想象一下这样的结果: 回答1 在 Gephi 中,您可以使用基于地图的布局根据节点位置可视化您的网络。 您需要有两个包含节点地理编码坐标的属性:纬度和经度。 有两个插件可以用于可视化(默认情况下,Gephi 都没有提供,您必须从 Tools -> Plugins 安装它们): GeoLayout - 当您应用那个时,您必须指定记录经度和纬度的属性的名称并选择一个投影(例如墨卡托)。 您的节点将相应地布置。 国家地图 - 这是一个插件,显示(相当粗糙 - 不太详细)轮廓图作为您网络的背景。 您可以按顺序使用两者 - 尽管坦率地说,我使用 GeoLayout 取得了更大的成功,将结果导出到矢量图形
  • ARM架构服务器centos7.5上yum安装k8s教程
    1安装环境 [root@k8s-master ~]# uname -a Linux k8s-master 4.14.0-49.12.ts7.aarch64 #1 SMP Tue Nov 12 19:06:54 CST 2019 aarch64 aarch64 aarch64 GNU/Linux [root@k8s-master ~]# cat /etc/redhat-release TongyuanOS release 7.5.1810 主机 IP 功能 k8s-master 192.168.0.239 Master k8s-node1 192.168.0.244 node 2修改master和node的hosts文件 [root@k8s-master ~]# vim /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.localdomain4 ::1 localhost localhost.localdomain localhost6 localhost6.localdomain6 10.2.152.78 k8s-master 10.2.152.72 k8s-node1 3安装ntp实现所有服务器间的时间同步 [root@k8s-master ~]# yum install ntp
  • 史上最全面的Kubernetes(k8s)入门笔记
    史上最全面的Kubernetes(k8s)入门笔记 准备虚拟机 使用的操作系统为Ubuntu 18.04.4 Server amd64,安装时使用了阿里云镜像源,如果没有使用的话记得换源。 因为准备虚拟机的过程也比较复杂,所以也记录一下吧。 创建虚拟机时,创建2核2G的虚拟机,硬盘20G就可以: 我用的是Ubuntu Server 18.04.4,用18.04的话安装过程也是大同小异的: 选择English: Continue Without Updating: Done: Done: Done: 输入阿里云的镜像地址:https://mirrors.aliyun.com/ubuntu/,然后Done: 选择Use An Entire Disk And Set Up LVM: 选安装位置,咱就一个,没可选的,直接回车。 选择ubuntu-lv,然后选择edit: size改成旁边那个max的数,然后save: 然后Done,Continue。 这里随便写,只需要写一个你能记得住的密码就好: 按一下回车,然后Done: 直接Done: 然后就可以泡一杯咖啡等安装完成了,这个过程应该不会花费太长时间: 这样就完成了,Reboot即可。 重启之后登录,开始后面的配置。 Linux基础环境的配置 使用SSH工具远程连接 ifconfig看一下ip地址,然后用SSH工具登录