用图像替换d3.js符号 [英] Replace d3.js symbols with images
本文介绍了用图像替换d3.js符号的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
提及此提示示例 :
我需要将图片替换为图片...或者可能首先使用单个图片。例如,此图片:
I need to replace the symbols with images...or possibly a single image at first..like for instance, this image:
https://github.com/favicon.ico
我在代码中尝试如下:
vis.selectAll("path")
.data(nodes)
.enter().append("path")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.append("image")
.attr("xlink:href", "https://github.com/favicon.ico")
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16)
.style("stroke", "black")
.style("stroke-width", "1px")
.call(force.drag);
它会将 image
path
标记,但不显示图像本身。任何提示?
It is appending image
tag to each of the path
tags, but not showing up the image itself. Any hints?
推荐答案
您将每个图像追加为每个路径的子项。你可能想要的是附加一个包含路径和图像的组(我认为这是你在第一条评论中提出的)。
You're appending each image as a child of each path. What you probably want is to append a group that contains both a path and an image (which I think is what you were asking in your first comment).
:
var groups = vis.selectAll("g")
.data(nodes).enter()
.append("g")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.call(force.drag);
groups.append("path")
.attr("d", d3.svg.symbol()
.size(function(d) { return d.size; })
.type(function(d) { return d.type; }))
.style("fill", "steelblue")
.style("stroke", "black")
.style("stroke-width", "1.5px");
groups.append("image")
.attr("xlink:href", "https://github.com/favicon.ico")
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16)
.style("stroke", "black")
.style("stroke-width", "1px");
请参阅: http://jsfiddle.net/findango/a7as6/4/
这篇关于用图像替换d3.js符号的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文