javascript - 使用 d3.js 将图像插入树状图的叶子中-6ren

javascript - 使用 d3.js 将图像插入树状图的叶子中

转载作者：行者123 更新时间：2023-11-30 10:04:38

26

4

我正在使用 Cluster Dendogram .我想根据我的聚类结果将图像插入到树状图的叶子中。我该怎么做？

    <!DOCTYPE html>
<meta charset="utf-8">
<style>

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

</style>
<body>
 <svg id="mySvg" width="80" height="80">
    <defs id="mdef">
      <pattern id="image" x="-100" y="-100" height="200" width="200" patternUnits="userSpaceOnUse" >
        <image x="50" y="5" width="10" height="10" xlink:href="http://www.e-pint.com/epint.jpg"></image>
      </pattern>

    </defs>
  </svg>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 2200;

var cluster = d3.layout.cluster()
    .size([height, width - 160]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(40,0)");



d3.json("https://rawgit.com/bansaghi/d3.chart.layout.hierarchy/master/example/data/flare.json", function(error, root) {
  var nodes = cluster.nodes(root),
      links = cluster.links(nodes);

  var link = svg.selectAll(".link")
      .data(links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);

  var node = svg.selectAll(".node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

  //var circle = svg.append("circle")
   //   .style("fill", "red")
   //   .style("fill", "url(#image)"); 

  node.append("circle")
      .attr("r", 4.5);
      //.style("fill", "black");e

  node.append("image")
      .attr("xlink:href", "http://www.e-pint.com/epint.jpg")


  node.append("text")
      .attr("dx", function(d) { return d.children ? -8 : 8; })
      .attr("dy", 3)
      .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
      .text(function(d) { return d.name; });
});

d3.select(self.frameElement).style("height", height + "px");
console.log(d3);
</script>

在这段代码中，我添加了样式部分和 node.append("image") .attr("xlink:href", "http://www.e-pint.com/epint.jpg").

问题是我看不到充满图像的圆圈。有什么问题吗？

最佳答案

检查这个JSFiddle

这是向树叶添加图像的代码:

var leafnodes = svg.selectAll('g.leaf.node')
   .append("image")
   .attr("xlink:href", "http://www.e-pint.com/epint.jpg")
   .attr("width", 10)
   .attr("height", 10);

在此之前，叶节点被标记为 leaf 类，如下所示:

.attr("class", function(n) {
      return n.children ? "inner node" : "leaf node";
})

更新:

要向节点添加不同的图像，您可以这样做:

var imgs = ['http://***.jpg',
            'http://***.jpg',
            'http://***.jpg'];

var leafnodes = svg.selectAll('g.leaf.node')
    .append("image")
    .attr("xlink:href", function (d) { 
        // get random image from array
        return imgs[Math.floor(Math.random() * imgs.length)]; 
    })
    .attr("width", 10)
    .attr("height", 10);

查看上面的 JSFiddle 以获取完整示例。

关于javascript - 使用 d3.js 将图像插入树状图的叶子中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29824385/

26

4

0

文章推荐： javascript 不更新 p 标签的数据

文章推荐： swift - 制作 firebase 用户列表

文章推荐： javascript - 为什么这个必需函数的可变参数返回未定义？

文章推荐： objective-c - 如何在 Objective-C 中使用这个枚举？

sql - 哪个最快，1x 插入 512 行，4x 插入 128 行，或 512x 插入 1 行
我有 512 行要插入到数据库中。我想知道提交多个插入内容是否比提交一个大插入内容有任何优势。例如 1x 512 行插入 -- INSERT INTO mydb.mytable (id, phonen
sql:删除 + 插入 vs 更新 + 插入
已经提出了类似的问题，但由于它总是取决于，我单独询问我的具体情况。我有一个网站页面，显示来自数据库的一些数据，要从该数据库生成数据，我必须执行一些相当复杂的多连接查询。数据每天(每晚)更新一次。
python - pymongo 插入 vs pymysql 插入
我正在使用 MongoDb 和 MySQL 的 python 连接器 pymongo 和 pymysql 测试 MongoDb 和 MySQL，特别是插入功能。 pymongo版本是3.4，pymys
sql - 大型 SQL 插入 TVF 与 BULK 插入
从 C# 应用程序插入大型数组(10M 元素)的最快方法是什么？到目前为止，我使用的是批量插入。 C# 应用程序生成一个大文本文件，我使用 BULK INSERT 命令加载它。出于好奇，我编写了一个
java - 语法错误 : insert "enum Identifier", 插入 "EnumBody"，插入 "}"
我编写了一个枚举类型，当我为它运行我创建的 JUnit 测试时会出现以下语法错误: java.lang.Error: Unresolved compilation problems: Synt
C二叉搜索树实现——插入
我正在尝试创建一个程序，它将单词列表作为输入，并将它们排序为二叉树，以便能够找到它们，例如像字典。这是我到目前为止所做的，但是 newEl -> el = input; 出现段错误，我知道这是因为它试
latex - 缺少 $ 插入
你好我有编译这个问题 \begin{equation} J = \sum_{j=1}^{C} \end{equation} 我不断收到错误 missing $ inserted 这很奇怪，因
没有主键的 Linq 插入
我需要使用 LINQ to SQL 将记录插入到没有主键的表中。 table 设计得很差；我无法控制表结构。该表由几个 varchar 字段、一个文本字段和一个时间戳组成。它用作其他实体的审计跟踪。
插入 PdfCell 时图像会调整大小
我正在尝试使用 itextsharp 创建 Pdf。我添加了一张包含两列的表格，其中一列包含文本和其他图像。我想要恒定的图像大小如果另一个单元格中的文本增加并且其他单元格中的图像大小不同，我的图像会
php - 插入…………从中选择
我想把 calory 作为 fruits 的第一个值，我做不到，有人能帮忙吗？ $sql = 'INSERT INTO fruits VALUES('', ?, ?, ?)'
r - 插入/扩展季度到月度系列
我有一个包含季度观察结果的 data.frame。我现在想插入每月值(首选三次，线性很好)。中间目标应该是使用 DATE 创建一个 data.frame作为所有每月观察的索引和缺失值。谷歌搜索表明我
sql - 用数组“插入”
我想知道是否有办法在值列表中使用“插入”。我正在尝试这样做: insert into tblMyTable (Col1, Col2, Col3) values('value1', value
Javascript 插入 IFRAME
我想让人们能够在他们的网站中插入单个 Javascript 行，这实际上允许我插入包含我网站内容的固定大小的 IFRAME。它实际上是一个小部件，允许他们搜索我的网站或接收其他信息。这可能吗？最佳答
c# - 插入、选择和更新日期时间
我有一个包含时间的表，列名为 time，数据类型为 Date。在 asp.net 中，我想要一个查询插入日期，另一个查询则在 2 个日期之间进行选择。我已经尝试过这个: string data =
triggers - 触发编译错误(插入)
这是我的代码: create or replace trigger th after insert on stock for each row declare sqty number;
使用存储过程的具有唯一约束的 SQL 插入
这是一个带有具体示例的通用问题。我有一个包含三个字段(流派 ID (PK IDENTITY)、流派和子流派)的表。该表对(流派，子流派)组合具有唯一约束。我想知道如何修改存储过程以在表中不存在时插
Java:插入/替换到特定大小的排序数组
因此，我正在遍历二叉树，节点包含字符串，以及读取文件时该字符串是否出现多次。我只查找读取文件时出现次数最多的前 10 个单词，因此本质上我只是比较 int 值。我的问题是我正在尝试找出一种有效的方法
c++ - 插入 map
我有一张机票和行李 map ，每张门票必须是唯一的，并且必须与 map 上的位置相对应是否可以仅更改行李(m_bagage->秒)而不更改 key ？ std::unordered_map m_c
Java Jdbc 插入
我正在使用 jdbc 驱动程序做一个示例项目。我的问题是，如果我在 2 文本字段中输入空值。 null 不应该加载到数据库中吗？有没有办法避免在数据库中插入空字段？任何帮助将不胜感激。 //Execu
SSIS:插入/更新
我想知道 SSIS 中是否有特定的插入或更新选项。如果我想让程序检查它是更新还是插入，我是否必须做一些编码？或者是否可以启用一个选项，以便它会自行检查 PK 是否存在，然后更新，否则插入？亲切的问

首页

博学

6Ren·AI

商城

javascript - 使用 d3.js 将图像插入树状图的叶子中