Question

您好我正在尝试将图像放在饼图的外部标签上。设置img或image标签将显示标签上写的标签。

替换所有文本值不起作用：

var svgs =  d3.selectAll("text");            
    svgs.append("svg:image")
      .attr("xlink:href", "/web/images/edit.png")
      .attr("width", 24)
      .attr("height", 24);

不能相信这样简单的事情不能简单。任何人都可以帮忙吗？

Answer 1

您的问题对于具体答案还不够具体，但作为一个例子，我已经对此nice pie chart进行了修改，并将其中一个标签替换为图片：

var text = svg.select(".labels").selectAll("text")
    .data(pie(data), key);

var img = svg.select(".images").selectAll("image")
  .data(pie(data), key);

 text.enter()
    .append("text")
    .filter(function(d,i){
      return d.data.label !== "do";  //<-- on the "do" label suppress the text
    })
    .attr("dy", ".35em")
    .text(function(d) {
        return d.data.label;
    });

text.transition().duration(1000)
    .attrTween("transform", function(d) {
        this._current = this._current || d;
        var interpolate = d3.interpolate(this._current, d);
        this._current = interpolate(0);
        return function(t) {
            var d2 = interpolate(t);
            var pos = outerArc.centroid(d2);
            pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
            return "translate("+ pos +")";
        };
    })
    .styleTween("text-anchor", function(d){
        this._current = this._current || d;
        var interpolate = d3.interpolate(this._current, d);
        this._current = interpolate(0);
        return function(t) {
            var d2 = interpolate(t);
            return midAngle(d2) < Math.PI ? "start":"end";
        };
    });

function midAngle(d){
    return d.startAngle + (d.endAngle - d.startAngle)/2;
}

text.exit()
    .remove();

img.enter()
    .append("image")
    .filter(function(d,i){
      return d.data.label === "do"; //<-- only add image on "do"
    })
    .attr("xlink:href", "http://placehold.it/24x24")
.attr("width", 24)
.attr("height", 24);

img.transition().duration(1000)
    .attrTween("transform", function(d) {
        this._current = this._current || d;
        var interpolate = d3.interpolate(this._current, d);
        this._current = interpolate(0);
        return function(t) {
            var d2 = interpolate(t);
            var pos = outerArc.centroid(d2);
            pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
            return "translate("+ pos +")";
        };
    })

img.exit()
    .remove();

这里是working example。

enter image description here

评论的编辑

我的原始答案是直接的d3，但由于您使用的是另一个库d3pie，请在调用d3pie后执行此操作：

setTimeout(function(){
    var labelG = d3.select('#p0_labelGroup1-outer');
    labelG.select('text').remove();
    labelG
      .append("svg:image")
      .attr("xlink:href", "http://lorempixel.com/60/60/animals/")
      .attr("width", 61)
      .attr("height", 61)
      .attr("x", -20)
      .attr("y", -30);
    }, 10);

工作示例here。

d3饼图 - 外部标签上的图像

1 个答案: