首页 / JAVASCRIPT / javascript – 定向网络中的衰落网络连接 – d3js

javascript – 定向网络中的衰落网络连接 – d3js

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 定向网络中的衰落网络连接 – d3js，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8500字，纯文字阅读大概需要13分钟。

内容图文

我有一个使用d3.layout.force的定向网络.适应this answer,如果连接(连接方向无关紧要),我设法获得节点和链接淡入淡出.

我遇到的问题是能够在它们所处的路径通过鼠标悬停事件改变其不透明度时更改标记的不透明度.

这是包含isConnected函数的脚本,用于确定连接的节点：

A live example is here.

<script>


  function bar() {
  console.log("click");
  force.stop();
  force.start();
}



  var links = [
  {source: "A", target: "D", type: "high"},
  {source: "A", target: "K", type: "high"},
  {source: "B", target: "G", type: "high"},
  {source: "C", target: "A", type: "low"},
  {source: "D", target: "K", type: "low"},
  {source: "E", target: "A", type: "low"},
  {source: "F", target: "B", type: "low"},
  {source: "K", target: "J", type: "low"},
  {source: "F", target: "A", type: "low"},
  {source: "F", target: "I", type: "low"},
  {source: "G", target: "H", type: "low"},
  {source: "E", target: "K", type: "high"},
  {source: "E", target: "G", type: "low"},
  {source: "E", target: "F", type: "high"},
  {source: "D", target: "E", type: "high"}  
];

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 = 960,
    height = 700;

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(105)
    .charge(-775)
    .on("tick", tick)
    .start();



force.on("start", function () {
    console.log("start");
});
force.on("end", function () {
    console.log("end");
});

R=18



var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

// add defs-marker
svg.append('svg:defs')
    .append('svg:marker')
    .attr('id', 'end-arrow')
    .attr('viewBox', '0 0 10 10')
    .attr('refX', 2+R)
    .attr('refY', 5)
     .attr('markerWidth', 4)
     .attr('markerHeight', 4)
    .attr('orient', 'auto')
    .append('svg:path')
    .attr('d', 'M0,0 L0,10 L10,5 z');


var link = svg.selectAll(".link")
    .data(force.links())
    .enter()
    .append("line")
    .attr("class", "link")
    .attr('marker-end', 'url(#end-arrow)')
;  

var node = svg.selectAll(".node")
    .data(force.nodes())
    .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

node.append("circle")
    .attr("r", R)
    .on("mouseover", fade(.1))
    .on("mouseout", fade(1))
;

node.append("text")
    .attr("x", 0)
    .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 + ")"; });
}



   var linkedByIndex = {};
    links.forEach(function(d) {
        linkedByIndex[d.source.index + "," + d.target.index] = 1;
    });

    function isConnected(a, b) {
        return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
    }

 function fade(opacity) {
        return function(d) {
            node.style("stroke-opacity", function(o) {
                thisOpacity = isConnected(d, o) ? 1 : opacity;
                this.setAttribute('fill-opacity', thisOpacity);
                return thisOpacity;
            });

            link.style("stroke-opacity", function(o) {
                return o.source === d || o.target === d ? 1 : opacity;
            });

           marker.style("opacity", function(o) {
                return o.source === d || o.target === d ? 1 : opacity;
            });
        };
 }


</script>

一个切线相关的问题是如何缩短路径,以便当节点和链路的不透明度消失时,到达每个节点中间的线路不明显.

解决方法:

由于标记实例的呈现方式,您的方法不可行.将我自己的answers中的一个变为cannibal并引用SVG规范：

07001

[…]

The rendering effect of a marker is as if the contents of the referenced ‘marker’ element were deeply cloned into a separate non-exposed DOM tree for each instance of the marker. Because the cloned DOM tree is non-exposed, the SVG DOM does not show the cloned instance of the marker.

只有原始标记元素,即声明<标记>.元素,可以使用CSS进行样式化,而通过属性marker-start,marker-mid或marker-end引用的克隆实例不可访问,因此不能单独设置样式.

CSS2 selectors can be applied to the original (i.e., referenced) elements because they are part of the formal document structure. CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.

为了规避这些约束,您可以使用两个定义标记元素,第二个是第一个具有降低不透明度的克隆版本.

// add defs-markers
svg.append('svg:defs').selectAll("marker")
    .data([{id:"end-arrow", opacity:1}, {id:"end-arrow-fade", opacity:0.1}])
  .enter().append('marker')
    .attr('id', function(d) { return d.id; })
    .attr('viewBox', '0 0 10 10')
    .attr('refX', 2+R)
    .attr('refY', 5)
    .attr('markerWidth', 4)
    .attr('markerHeight', 4)
    .attr('orient', 'auto')
  .append('svg:path')
    .attr('d', 'M0,0 L0,10 L10,5 z')
    .style("opacity", function(d) { return d.opacity; });

在你的fade()函数中,你可以切换行的marker-end属性来引用相应的标记的id：

link.attr("marker-end", function(o) {
  return opacity === 1 || o.source === d || o.target === d
    ? 'url(#end-arrow)' : 'url(#end-arrow-fade)';
});

请查看以下代码片段以了解正常工作：

function bar() {
  console.log("click");
  force.stop();
  force.start();
}
  
var links = [
  {source: "A", target: "D", type: "high"},
  {source: "A", target: "K", type: "high"},
  {source: "B", target: "G", type: "high"},
  {source: "C", target: "A", type: "low"},
  {source: "D", target: "K", type: "low"},
  {source: "E", target: "A", type: "low"},
  {source: "F", target: "B", type: "low"},
  {source: "K", target: "J", type: "low"},
  {source: "F", target: "A", type: "low"},
  {source: "F", target: "I", type: "low"},
  {source: "G", target: "H", type: "low"},
  {source: "E", target: "K", type: "high"},
  {source: "E", target: "G", type: "low"},
  {source: "E", target: "F", type: "high"},
  {source: "D", target: "E", type: "high"}  
];

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 = 600,
    height = 600;

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(105)
    .charge(-775)
    .on("tick", tick)
    .start();

force.on("start", function () {
    console.log("start");
});
force.on("end", function () {
    console.log("end");
});

R=18
 
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

// add defs-markers
svg.append('svg:defs').selectAll("marker")
    .data([{id:"end-arrow", opacity:1}, {id:"end-arrow-fade", opacity:0.1}])
  .enter().append('marker')
    .attr('id', function(d) { return d.id; })
    .attr('viewBox', '0 0 10 10')
    .attr('refX', 2+R)
    .attr('refY', 5)
    .attr('markerWidth', 4)
    .attr('markerHeight', 4)
    .attr('orient', 'auto')
  .append('svg:path')
    .attr('d', 'M0,0 L0,10 L10,5 z')
    .style("opacity", function(d) { return d.opacity; });

var link = svg.selectAll(".link")
    .data(force.links())
    .enter()
    .append("line")
    .attr("class", "link")
    .attr('marker-end', 'url(#end-arrow)');  
 
var node = svg.selectAll(".node")
    .data(force.nodes())
    .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

node.append("circle")
    .attr("r", R)
    .on("mouseover", fade(.1))
    .on("mouseout", fade(1))
;

node.append("text")
    .attr("x", 0)
    .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 + ")";
  });
}
  
var linkedByIndex = {};
links.forEach(function(d) {
  linkedByIndex[d.source.index + "," + d.target.index] = 1;
});

function isConnected(a, b) {
  return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index +   "," + a.index] || a.index == b.index;
}
  
function fade(opacity) {
  return function(d) {
    node.style("stroke-opacity", function(o) {
      thisOpacity = isConnected(d, o) ? 1 : opacity;
      this.setAttribute('fill-opacity', thisOpacity);
      return thisOpacity;
    });

    link.style("stroke-opacity", function(o) {
      return o.source === d || o.target === d ? 1 : opacity;
    });

    link.attr("marker-end", function(o) {
      return opacity === 1 || o.source === d || o.target === d
        ? 'url(#end-arrow)' : 'url(#end-arrow-fade)';
    });          
  };
 }

.node circle {
  fill: #DDD;
  stroke: #777;
  stroke-width: 2px;
}
.node text {
  font-family: sans-serif;
  text-anchor: middle;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.link {
  stroke: #88A;
  stroke-width: 4px;
}
text {
  font: 18px sans-serif;
  pointer-events: none;
}
#end-arrow {
  fill: #88A;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

内容总结

以上是互联网集市为您收集整理的javascript – 定向网络中的衰落网络连接 – d3js全部内容，希望文章能够帮你解决javascript – 定向网络中的衰落网络连接 – d3js所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/702068.html

来源：【匿名】

【上一篇】JavaScript Countdown计时器每天到特定时间【下一篇】javascript 怎么调用php方法

更多 ►

【javascript – 定向网络中的衰落网络连接 – d3js】教程文章相关的互联网学习教程文章

javascript面试--网络收集

史上最全的Javascript面试题总结（内附答案） - CSDN博客http://blog.csdn.net/u011277123/article/details/702087686、什么是未声明和未定义的变量？--为什么不是为赋值？未声明的变量是程序中不存在且未声明的变量。如果程序尝试读取未声明变量的值，则会遇到运行时错误。未定义的变量是在程序中声明但尚未给出任何值的变量。如果程序尝试读取未定义变量的值，则返回未定义的值。12、说明如何使用JavaScript提交表单？--jQ中有类...

JavaScript数组知识网络【代码】

JavaScript数据类型基本数据类型BooleanNullNumberStringSymbolUndefined对象数据类型ObjectBuild-in objectArrayDateRegExpmore...Array定义：JavaScript数组是内置的对象之一，它可以用一个变量来存储多个同种类型或不同类型的值。构造方法 var newArr = new Array(values);var newArr = [values]; 判断是否数组Array.isArray(arr)arr instance of Array数据结构栈(stack) 后进先出(LIFO), 操作：进栈arr.push(element), 出栈arr...

JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)【代码】【图】

利用节点间的层次关系获取节点：上一节讲了3中获取的方式： * ※※一、绝对获取，获取元素的3种方式：—Element * 1、getElementById(): 通过标签中的id属性值获来取该标签对象 * 2、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合 * 3、getElementsByTagName(): 通过标签名来获取该标签对象集合现在来看看相对获取的方式：※※二、相对获取(利用节点之间的层次关系)，获取节点：—Node 1、父节点：parentNode...

JavaScript---网络编程(9-2)--DHTML技术演示(2-2)-表格加强【代码】【图】

对上篇博客的最后那个表格隔行高亮显示加了个功能，鼠标监听和年龄从小到大排序。演示代码：<html><head><title>DHTML技术演示---表格中页面中的显示操纵--行间隔高亮显示</title><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><styletype="text/css">@importurl(table.css);.one{background:#00ff00;}.two{background:rgb(210,0,0);}.over{background-color:#ffff00;}</style><scripttype="text/javascript"...

javascript从网络下载随机笑话【代码】

/**** 讲笑话函数(调试用)* @param callback 回调函数*/function randomText(callback) {var result =‘‘;$.ajax({type:"get",url:"http://www.mxnzp.com/api/jokes/list/random",dataType:"json",async:false,success:function(response){var code = response.code;var data = response.data;if(code == 1 && data.length > 1) {var text = data[0].content;callback(text);result = text;}},error:function (res) {console.log(...

How Javascript works (Javascript工作原理) (十二) 网络层探秘及如何提高其性能和安全性【图】

个人总结:阅读完这篇文章需要20分钟，这篇文章主要讲解了现代浏览器在网络层传输所用到的一些技术。这是 JavaScript 工作原理的第十二章。正如在之前关于渲染引擎的文章中所讲的那样，我们相信好的和伟大的 JavaScript 开发者之间的差别在于后者不仅仅只是理解了语言的具体细节还了解其内部构造和运行环境。网络简史49 年前，ARPAnet 诞生了。它是早期的报文分组交换网络及第一个实现 TCP/IP 协议套件的网络。该网络连通了加利福...

js判断网络连通性

js判断网络连通性if (window.navigator.onLine == true) { console.log("首次 -- 已连接") $.ajax({ url: "https://www.baidu.com/", type: "POST", timeout: 1000, dataType: "json", }).complete(function (XMLHttpRequest) { ...

JavaScript实现简单的神经网络算法图文详解【图】

神经网络简介神经网络试图模拟大脑的神经元之间的关系来处理信息。它的计算模型通常需要大量彼此连接的节点。每个神经元通过某种特殊的输出函数来处理来自其它相邻神经元的加权输入值。神经元之间的信息传递的强度，用所谓的加权值来定义，算法会不断的调整加权值来实现自我的学习过程。神经网络分为多层，如上图，有输入层，隐藏层和输出层。JS线性代数包神经网络的计算涉及到大量的矩阵计算，有许多的线性代数的开源的软件，Pyth...

javascript-如何正确设置brain.js神经网络【代码】

我正在使用从http://archive.ics.uci.edu/ml/datasets/Auto+MPG开始的自动MPG训练集我的代码是：'use strict'; var brain, fs, normalizeData, trainNetwork, _;_ = require('lodash');brain = require('brain');fs = require('fs');trainNetwork = function(trainNetworkCb) {var net;net = new brain.NeuralNetwork();return fs.readFile('./data/autodata.csv', function(err, fileData) {var fileString, lines, trainingData...

Javascript-为什么这个神经网络不渲染(仅)完整的3层路径？【代码】

所讨论的功能是基于相当简单的数据结构来渲染表示在该图像右侧的神经网络. 努力发展：演变之后：每个点代表一个神经元,每条线代表一个连接.存在一个神经元和连接被渲染而没有被渲染的问题,我一直在努力解决这个问题达5个小时,没有休息时间.你们中的一位很可能会指出一个导致问题的愚蠢错误,我很可能会继续努力. 简而言之：连接从上到下运行.我只想渲染从上到下的完整路径.如果没有连接从顶部引出,则不应在中间绘制任何点(神经元).如...

如何通过网络将String从Java发送到JavaScript？【代码】

我有一个用Java生成的JSON字符串,我需要将这个字符串发送到另一台计算机,它将通过JavaScript接收它(因为electron). JavaScript计算机可能很遥远,并将通过互联网与Java应用程序联系. Java应用程序不是各种Web应用程序,它是一个简单的后端应用程序. 我该怎么做？解决方法:要使Java应用程序可以从外部访问,您需要以某种方式将其暴露给网络.有很多方法可以做到这一点,但可以说最简单的,至少是最容易找到帮助的方法是将它暴露为可通过HT...

react native实现往服务器上传网络图片的实例

如下所示： let common_url = http://192.168.1.1:8080/; //服务器地址 let token = ; //用户登陆后返回的token /** * 使用fetch实现图片上传* @param {string} url 接口地址* @param {JSON} params body的请求参数* @return 返回Promise */ function uploadImage(url,params){return new Promise(function (resolve, reject) {let formData = new FormData();for (var key in params){formData.append(key, params[key]);}let fi...

微信小程序网络请求wx.request详解及实例

微信小程序网络请求wx.request详解及实例如果说小程序API里面最重要一个接口是哪一个？那么首推wx.request()。相当于在小程序内请发起一个https请求（本地调试模式下支持HTTP）。HTTP协议中共定义了八种方法或者叫“动作”来表明对Request-URI指定的资源的不同操作方式。 GET：向特定的资源发出请求。POST：向指定资源提交数据进行处理请求。数据被包含在请求体中。PUT：向指定资源位置上传其最新内容。DELETE：请求服务器删除Req...

javascript-手机端可通过tel://来一键拨号，windows下，有没有js调用某个网络电话的api（例如skype），来实现点击一键拨号

我们都知道手机端可通过tel://来一键拨号，windows下，有没有js调用某个网络电话的api（例如skype），来实现点击一键拨号有硬件的更好。现在需求是：windows xp系统一台，座机一部，xp可访问自己的网站，网站上有用户的手机号，手机号后有个 “拨号” 按钮，点击拨号，调用座机电话，播打用户手机回复内容：我们都知道手机端可通过tel://来一键拨号，windows下，有没有js调用某个网络电话的api（例如skype），来实现点击一键拨号 ...

javascript – 如何使用react js组件在网页上流式传输网络摄像头？【代码】

我是reactJS的新手,并试图构建一个组件. 我想构建一个基本实用程序,其中我有一个显示实时网络摄像头源的视频组件,并且会有一个捕获按钮,用于捕获并存储源到磁盘的快照.我希望它在一个组件中(视频输入捕获按钮) 这段代码在浏览器中流式传输,但我希望它在一个组件中,<body> <div id="container"><video autoplay="true" id="videoElement"></video> </div> <script>var video = document.querySelector("#videoElement");navigator.g...

首页 / JAVASCRIPT / javascript – 定向网络中的衰落网络连接 – d3js

javascript – 定向网络中的衰落网络连接 – d3js

内容导读

内容图文

07001

内容总结

内容备注

内容手机端

【javascript – 定向网络中的衰落网络连接 – d3js】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程