If we want to add text to a node or a image

  1. // Create container for the images
  2. const svgNodes = svg
  3. .append('g')
  4. .attr('class', 'nodes')
  5. .selectAll('circle')
  6. .data(d3.values(nodes))
  7. .enter().append('g');
  8.  
  9. // Add image to the nodes
  10. svgNodes
  11. .append('image')
  12. .attr('xlink:href', d => `/static/media/${d.name.toLowerCase()}.png`)
  13. .attr('x', -25)
  14. .attr('y', -25)
  15. .attr('height', 50)
  16. .attr('width', 50);

  17. // Add text
  18. svgNodes
  19. .append("text")
  20. .attr('text-anchor', 'middle')
  21. .attr('dy', '.35em')
  22. .attr('y', -30)
  23. .attr('class', 'label')
  24. .text(d => d.name);
  1. .label {
  2. pointer-events: none;
  3. font: 8px sans-serif;
  4. text-transform: uppercase;
  5. color: black;
  6. }

[D3] Add label text的更多相关文章

  1. 给label text 上色 && 给textfiled placeholder 上色

    1.给label text 上色: NSInteger stringLength = ; stringLength = model.ToUserNickName.length; NSMutableAt ...

  2. [D3] Add hovercard

    The way to add hovercard is Append a div with class 'hovercard' in the tick function, positioning th ...

  3. [D3] Add image to the node

    We can create node with 'g' container, then append 'image' to the nodes. // Create container for the ...

  4. asp.net 批量下载实现(打包压缩下载)

    1.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default ...

  5. C#总结项目《影院售票系统》编写总结二

    昨天发布了总结项目的第一篇,需求分析以及类的搭建,今天继续更新,动态绘制控件.票类型的切换以及数据在窗体中的展现. 先从简单的开始,票类型的切换. 分析: 1.当点击普通票时 学生折扣和赠送者是禁用的 ...

  6. C#编写影院售票系统(A project with a higher amount of gold )(2:相关代码)

    此篇文章为项目代码,,,需要项目需求 ,思路分析与窗体效果请访问:http://www.cnblogs.com/lsy131479/p/8367304.html 项目类图: 影院类: using Sy ...

  7. c#用winform开发一个简易双色球项目

    开始画面 抽奖中: 抽奖结果: 需要一个随机数Random的帮助类,让随机数唯一性 public class RandomHelper { public int GetNum(int min, int ...

  8. flutter FloatingActionButton组件

    import 'package:flutter/material.dart'; class FloatingActionButtonDemo extends StatelessWidget { @ov ...

  9. Flutter 基础组件:按钮

    前言 Material组件库中提供了多种按钮组件如RaisedButton.FlatButton.OutlineButton等,它们都是直接或间接对RawMaterialButton组件的包装定制,所 ...

随机推荐

  1. Scrapy 框架介绍

    Scrapy 框架 Scrapy,Python开发的一个快速.高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据.Scrapy用途广泛,可以用于数据挖掘.监测和自动化测试. ...

  2. 【Henu ACM Round #13 B】Spider Man

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 会发现每个环可以操作的次数是固定的. (环的大小-1 也就是说一旦环确定了.其实结果就已经确定了. 则直接看操作总数的奇偶性就可以了 ...

  3. C# 对Excel操作时,单元格值的读取

    一.Range中Value与Value2的区别 当range("A1:B10")设置为 Currency (货币)和 Date (日期.日期时间)数据类型时,range2将返回对应 ...

  4. StdTranslator - Translate PDMS to STD for STAAD.Pro

    StdTranslator - Translate PDMS to STD for STAAD.Pro eryar@163.com STAAD.Pro是由美国世界著名的工程咨询和CAD软件开发公司—R ...

  5. Android自己定义视图(一):带下划线的TextView

    package com.francis.underlinetextviewtest; import android.content.Context; import android.content.re ...

  6. 76.Nodejs Express目录结构

    转自:https://blog.csdn.net/xiaoxiaoqiye/article/details/51160262 Express是一个基于Node.js平台的极简.灵活的web应用开发框架 ...

  7. 在gridview里查找模板里的button控件

    这个问题,真是搞了我1天,这次记住他 第一种方法: protected void GridView1_RowCommand(object sender, GridViewCommandEventArg ...

  8. idea git ignore 插件

    https://blog.csdn.net/qq_34590097/article/details/56284935

  9. PatentTips - Improving security in a virtual machine host

    BACKGROUND Computer viruses are a common problem for computer users. One typical mode of attack is t ...

  10. FormatMessage函数的使用方法

    使用FormatMessage时假设对一些參数不细致研究.那么就会出错误.首先说下这个函数 1 函数描写叙述 DWORD WINAPI FormatMessage( _In_ DWORD dwFlag ...