pathtext

最新推荐文章于 2020-11-29 09:59:26 发布
最新推荐文章于 2020-11-29 09:59:26 发布
阅读量1k 收藏
点赞数
分类专栏： d3 js 数据可视化 文章标签： d3 js d3 force 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/loganyang123/article/details/17543061
版权
数据可视化 同时被 3 个专栏收录
12 篇文章 0 订阅
订阅专栏
js
8 篇文章 0 订阅
订阅专栏
d3
4 篇文章 0 订阅
订阅专栏
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <style>
/*
.node {
  stroke: #ffffff;
  stroke-width: 0.1px;
}
*/
.link {
  stroke: #999;
  stroke-opacity: .6;
}

</style>
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

<body>
<script src="d3.min.js"></script>
<script>

var width = 960,
    height = 500;

var colors = d3.scale.category20();

var force = d3.layout.force()
    .charge(-320)
    .linkDistance(100)
    .size([width, height]);

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

d3.json("miserables1.json", function(error, graph) {
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .on("tick", tick)
      .start();

  var link = svg.selectAll(".link")
      .data(graph.links)
      .enter().append("line")
      .attr("class", "link")
      .attr("id", function(d) { return d.value; })
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

link.append('text')
    /*.attr('x', 10)
    .attr('y', 20)
    .style('fill', 'steelblue')
    .style('font-size', '24px')
    .style('font-weight', 'bold')
    .append('textPath')
    .attr({//引用路径
        'xlink:href': function(d) { return "'#"+d.value+"'"; }
    })*/
    .text(function(d) { return d.value; });

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



node.append("circle")
      .attr("r", 10)
      .style("fill", function(d) { return colors(d.group); });

 
 node.append("title")
      .text(function(d) { return d.name});
 node.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });
      

  /*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("transform", function(d) {
              return "translate(" + d.x + "," + d.y + ")";
      });
  });*/
  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 + ")";
      });
}

});

</script>
</body>
</html>

loganyang123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
d3.js: 在曲线路径上添加文本标记的正确方式
weixin_30808253的博客
06-06 2117
今天遇到一个在曲线路径上标识文本标记的问题，找到一个比较好的解决思路，在这里分享下： 使用d3建立的Force Layout，加上自定义的箭头形状，将多条连接线线改成弧线（https://www.cnblogs.com/webhmy/p/10906268.html）。现需沿弧线加上文字 var edgelabels = svg.selectAll(".edgelabel") .da...
d3 svg path添加文本_D3库实践笔记之幻化万千的返璞归真 |可视化系列32
weixin_39989159的博客
11-20 448
D3是什么？狭义的理解是一个JavaScript可视化库。通过操作HTML的基础元素或SVG元素构建可视化图形，绘制出精美交互性强的可视化图像。D3是Data-Driven Documents的简写，一个基于数据操纵文档的JavaScript库，文档指的是HTML的DOM，即文档对象模型(Document Object Model)，D3提供了各种实用的方法将数据绑定到DOM，根据数据操...
d3 svg path添加文本_数据可视化——D3展现数据最炫丽的一面
weixin_39761195的博客
11-29 460
热情的或——有温度的“1”大家好，大家肯定很好奇，数据能是什么样子嘛，不就是干巴巴的1.2.3…！哟，这个火热的“1”好像是挺绚丽的啊，但对不起，这只是数字，并不是数据。数据——无情的一板一眼那数据是什么样子呢？哈哈，数据实际上是数字组合起来，但是最初的它可是比数字还要规矩哦，大家肯定见过甚至用过excel吧，那就是数据最直接的体现哦。后来数据知道“化妆”了，色彩丰富的柱状图、折线图、饼图、雷达图...
文字路径动画控件TextPathView解析
totond的博客
02-26 3705
文字路径动画控件TextPathView解析 本文出处： 炎之铠csdn博客：http://blog.csdn.net/totond 炎之铠邮箱：yanzhikai_yjk@qq.com 本项目Github地址：https://github.com/totond/TextPathView 本文原创，转载请注明本出处！ 本篇文章已授权微信公众号 guolin_b...
d3 svg path添加文本_D3.js，数据可视化JavaScript库，值得拥有
weixin_39925413的博客
11-20 325
牛旦教育翻译，译者：山野英文链接：https://d3js.org/1 导引D3.js是一个基于文档的数据操作JavaScript库。D3能帮助你使用HTML、SVG和CSS而使数据生动起来。D3对web标准的强化为你提供了现代浏览器的全部功能，而无需将自己捆绑在专有框架上，还结合了强大的可视化组件和数据驱动的DOM操作方法。在此下载最新版本(6.1.1): d3.zip: https://git...
Android代码-TextPathView是一个把文字转化为路径动画然后展现出来的自定义控件
08-06
TextPathView > Go to the English README 介绍 　TextPathView是一个把文字转化为路径动画然后展现出来的自定义控件。效果如上图。 > 这里有原理解析！ ...　主要的使用流程就是输入文字，然后设置一些动画的属性，...
Android 通过网络图片路径查看图片实例详解
08-30
pathText = (EditText) this.findViewById(R.id.imagepath); // 图片路径 imageView = (ImageView) this.findViewById(R.id.imageView); // 显示图片控件 Button button = (Button) this.findViewById(R.id....
Android通过访问网页查看网页源码实例详解
01-20
pathText = (EditText) findViewById(R.id.pagepath); // 网页路径 codeView = (TextView) findViewById(R.id.codeView); // 显示获得的源码 Button button = (Button) findViewById(R.id.button); // 查看按钮 ...
dali.js:轻量级jQuery svg引擎
04-28
dali.js 一个简单的SVG框架。 达利哲学：不要抽象SVG DOM。 SVG将继续存在，让我们使用Javascript的功能来使SVG正常工作。 dali.js在谷歌chrome...p = surface.path({d:pathtext}); g = surface.g(); r = g.rect
【D3.js数据可视化系列教程】--（十四）有路径的文字
司机大傻
09-17 1万+
有路径的文字
d3 svg path添加文本_D3库实践笔记之SVG预定义元素与使用 |可视化系列34
weixin_39593354的博客
11-29 833
在第一篇笔记里简单介绍了SVG，SVG(Scalable Vector Graphics，可伸缩矢量图形)是HTML里的一种标签，也可以独立保存为.svg的文件，SVG 基于 XML 格式定义图像，通常使用SVG作为d3绘图的容器。个人认为熟悉SVG中各种图形元素的属性对于学习D3是磨刀不误砍柴工。而且svg的应用场景广泛，不止于D3，也方便自己理解其他库或者软件生成的svg图形文档。S...
SVG:textPath深入理解
weixin_33777877的博客
10-27 390
SVG的文本可以沿着一条自定义的Path来排布，比如曲线、圆形等等，使用方式如下所示（来源MDN）： &lt;svg viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt; &lt;defs&gt; ...
D3 svg text标签控制
Claroja
05-08 1万+
没有任何控制，text的锚点指向的左下的位置 &lt;html&gt; &lt;body&gt; &lt;script src="https://cdn.bootcss.com/d3/3.5.17/d3.min.js"&gt;&lt;/script&gt; &lt;svg id=zero width=300 height =300 &gt;&lt;/svg&gt; &lt;scr
d3 svg path添加文本_手把手教你D3.js 实现数据可视化极速上手到Vue应用
weixin_39611754的博客
11-29 748
前言D3近年来一直是JavaScript最重要的数据可视化库之一，在创建者Mike Bostock的维护下，前景依然无量，至少现在没有能打的:D3与众多其他库的区别在于无限定制的能力(直接操作SVG)。它的底层API提供对原生SVG元素的直接控制，但它也带来了高学习曲线的成本。我们将把D3和Vue结合在一起 - 使用Vue的动态数据绑定，清晰的语法和模块化结构，可以充分发挥D3的最佳性能。 根据广...
Canvas. drawTextOnPath()
本然233的博客
11-01 4289
void drawTextOnPath (String text, Path path, float hOffset, float vOffset, Paint paint) void drawTextOnPath (char[] text, ...
使用 d3.js 绘制资源拓扑图
Fish
12-30 5934
使用 d3.js 绘制资源拓扑图 wzb 网易游戏高级开发工程师，现主要负责 CMDB 的前端开发工作 背景 随着业务的发展，项目下的各种资源会越来越多，越来越复杂。如何提供一种让用户快捷查看全局资源与模型关联关系的能力呢？资源拓扑图便是一种很好的方式。 本文将尽量简化业务上的内容，重点介绍如何使用 d3.js 来进行前端拓扑图的绘制。 为什么选择 d3?d3.js (data driv...
大量 D3.js 示例 （open经验库）
wanziidianxia的专栏
10-09 9920
D3.js 是一个基于数据操作文档JavaScript库。D3帮助你给数据带来活力通过使用HTML、SVG和CSS。D3重视Web标准为你提供现代浏览器的全部功能，而不是给你一个专有的框架。结合强大的可视化组件和数据驱动方式Dom操作。以下收集了1800+的 D3.js 示例。  113th U.S. Congressional Districts20 years of the en
JavaScript 之 canvas（四）-- 绘制文字
热门推荐
一只小鹰
10-03 2万+
本文原文地址：https://www.jeremyjone.com/485/， 转载请注明，谢谢。 基本概念 在canvas中，为我们提供了一个非常方便的添加文字的方法，直接上 w3school 的文档说明： context.fillText(text,x,y,maxWidth); // text: 规定在画布上输出的文本。 // x: 开始绘制文本的 x 坐标位置（相对于画布）。 // y:...
d3js svg:text
边城之美
03-16 5209
svg中的text元素是有html中的text元素延伸过来的。text元素是由一系列的文本组成的图形元素。text的内容是定义的字符串（和html中的text元素相同）。text元素的位置由x和y属性决定。且偏移量可由dx和dy控制。偏移量offset可以很容易的让我们调整文本的边缘和基线（margin and baseline）：可以使用单位 "em" 来调整text的字体大小。文本的水平放
python做一个查q绑脚本
最新发布
08-22
要编写一个Python脚本来实现查找并绑定脚本的功能，可以按照以下步骤进行操作： 1. 导入必要的模块：在脚本开始处导入所需的模块，比如maya.cmds和os。 2. 创建UI界面：使用maya.cmds创建一个窗体，并添加所需的UI元素，例如按钮、下拉菜单和标签。 3. 实现功能函数：编写函数来实现具体的功能。例如，get_location_desk_list()函数可以用来获取本地磁盘列表，并将其添加到下拉菜单中。 4. 编写事件处理函数：为UI元素添加相应的事件处理函数。例如，当用户选择某个磁盘路径时，可以编写change_desk()函数来更新当前选择路径的显示。 5. 实现导入OBJ文件功能：编写函数来根据用户选择的路径，自动导入路径与子目录下的所有OBJ文件，并重命名它们。可以分别编写import_obj_re()函数实现导入所有OBJ文件的功能，以及import_obj_single()函数实现导入当前路径OBJ文件的功能。 以下是一个示例脚本的代码： ```python import maya.cmds as mc import os # 创建UI界面 def create_ui(): mc.window(title='磁盘路径', height=600) mc.columnLayout() # 添加目录下拉菜单 op = mc.optionMenu(label='目录', cc="change_desk()") # 添加显示当前选择路径的标签 pathText = mc.text(label='CurrentPath: C:/') # 获取本地磁盘并初始化菜单 get_location_desk_list() # 添加点击按钮 mc.button(label='导入所有OBJ', c='import_obj_re()') mc.button(label='导入当前路径OBJ', c='import_obj_single()') mc.showWindow() # 获取本地磁盘 def get_location_desk_list(): disk_list = [] for d in string.ascii_uppercase: disk = d + ':' if os.path.isdir(disk): disk_list.append(disk + "/") mc.menuItem(label=disk + "/") return disk_list # 更新当前选择路径的显示 def change_desk(): selected_path = mc.optionMenu(op, q=True, value=True) mc.text(pathText, e=True, label='CurrentPath: ' + selected_path) # 导入所有OBJ文件 def import_obj_re(): selected_path = mc.optionMenu(op, q=True, value=True) # 遍历路径与子目录下的所有OBJ文件，并导入并重命名 for root, dirs, files in os.walk(selected_path): for file in files: if file.endswith(".obj"): mc.file(os.path.join(root, file), i=True, renameAll=True) # 导入当前路径OBJ文件 def import_obj_single(): selected_path = mc.optionMenu(op, q=True, value=True) # 导入当前路径下的所有OBJ文件，并重命名 for file in os.listdir(selected_path): if file.endswith(".obj"): mc.file(os.path.join(selected_path, file), i=True, renameAll=True) # 执行脚本 create_ui() ``` 请注意，这只是一个示例脚本，具体的实现可能根据实际需求有所调整。在使用此脚本之前，请确保已正确安装Maya软件，并了解如何编写和运行Python脚本。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [使用Python编写Maya脚本插件批量导入Obj文件](https://blog.csdn.net/qq_34766000/article/details/97276222)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值