[英]Add image to D3.js Sunburst Example
I would like to extend this D3.js sunburst example in the way that it can display images rather than text. 我想以可以显示图像而不是文本的方式扩展此D3.js sunburst示例。 http://www.jasondavies.com/coffee-wheel/
http://www.jasondavies.com/coffee-wheel/
The interesting part of the js example code is following: js示例代码中有趣的部分如下:
d3.json("wheel.json", function(error, json) {
var nodes = partition.nodes({children: json});
var path = vis.selectAll("path").data(nodes);
path.enter().append("path")
.attr("id", function(d, i) { return "path-" + i; })
.attr("d", arc)
.attr("fill-rule", "evenodd")
.style("fill", colour)
.on("click", click);
var text = vis.selectAll("text").data(nodes);
var textEnter = text.enter().append("text")
.style("fill-opacity", 1)
.style("fill", function(d) {
return brightness(d3.rgb(colour(d))) < 125 ? "#eee" : "#000";
})
.attr("text-anchor", function(d) {
return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
})
.attr("dy", ".2em")
.attr("transform", function(d) {
var multiline = (d.name || "").split(" ").length > 1,
angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
rotate = angle + (multiline ? -.5 : 0);
return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
})
.on("click", click);
textEnter.append("tspan")
.attr("x", 0)
.text(function(d) { return d.depth ? d.name.split(" ")[0] : ""; });
textEnter.append("tspan")
.attr("x", 0)
.attr("dy", "1em")
.text(function(d) { return d.depth ? d.name.split(" ")[1] || "" : ""; });
The question is how I can replace the text with an image in this scenario. 问题是在这种情况下如何用图像替换文本。
Thank you very much. 非常感谢你。
var image = vis.selectAll("image").data(nodes);
var imageEnter = image.enter().append("image")
.attr("xlink:href", "https://github.com/favicon.ico")
.attr("width", 16)
.attr("height", 16)
.attr("x", function (d) {
return 33; // calculate x
}).attr("y", function (d) {
return 33; // calculate y
});
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image
force-directed images and labels: http://bl.ocks.org/mbostock/950642 力导向图像和标签: http : //bl.ocks.org/mbostock/950642
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.