Question

我正在创建一个包含arc的组，并在其中附加image标记。在image标签中，我使用xlink:href附加图片，但在输出中我能够看到任何内容。

任何人帮我找到我的代码的问题：

这是我的完整代码：

var dashBoardViewer =  function (params) {
    var container = params.container,
        width = params.width,
        height = params.height,
        groups = params.requiredGroup,
        inRadius = params.inRadius,
        outRadius = params.outRadius;

    return {
        init : function () {
            this.createSvg();
            this.createGroup();
        },
        createSvg : function () {
            this.svg = d3.select(container).append('svg').attr({
                width:width,
                height:height
            });
        },
        createGroup : function () {
            for(var i = 1; i <= groups; ++i) {
                var group = this.svg.append('svg:g')
                    .attr({
                        id : 'group'+i,
                        class:'group'
                    });
                this.arcCreator(group, i);
            }
        },

        arcCreator : function (group, index) {
            //move group
            switch (index) {
                case 1 : 
                    group.attr('transform', "translate("+outRadius+','+outRadius+")");
                    break;
                case 2 : 
                    group.attr('transform', "translate("+(width/2)+','+(outRadius*2)+")");
                    break;
                case 3 : 
                    group.attr('transform', "translate("+(width-outRadius)+','+outRadius+")");
                    break;
                case 4 : 
                    group.attr('transform', "translate("+outRadius*1.5+','+(height-outRadius)+")");
                    break;
                case 5 : 
                    group.attr('transform', "translate("+(width-(outRadius*1.5))+','+(height-outRadius)+")");
                    break;
            }

            var arc = d3.svg.arc()
                      .innerRadius(inRadius)
                      .outerRadius(outRadius-10) //deducting the stroke width
                      .startAngle(0)
                      .endAngle(360)

            return group.append("path")
                    .attr({"fill":"none",'stroke-width':5,'stroke':'#fff'})
                    .attr("id", function(d,i){return "s"+i;})
                    .attr("d",arc)
                    .append('image')
                    .attr({
                        "xlink:href":"images/circleImg.png", //nothing visible
                        width:257,
                        height:258
                    });
        }
    }
}

dashBoardViewer({
        container:'.container',
        width:1100,
        height:630,
        requiredGroup : 5,
        inRadius : 0,
        outRadius : 129
    }).init();

我的html输出：组中的一个

<g id="group1" class="group" transform="translate(129,129)"><path fill="none" stroke-width="5" stroke="#fff" id="s0" d="M0,119A119,119 0 1,1 0,-119A119,119 0 1,1 0,119Z"><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/circleImg.png" width="257" height="258"></image></path></g>

Answer 1

您执行xlink:href的方式不正确。试试这个：

.attr('xlink:href', 'path/to/image.png')
.attr('height', '258')
.attr('width', '257')

d3在拆分时更容易理解这些不同的属性。另外，如果xlink:href不起作用，请尝试使用href

修改

如果你想添加一个点击处理程序，d3也可以这样做，但顺序才是最重要的。那么让我们从早先的例子

return group.append("path") .attr({"fill":"none",'stroke-width':5,'stroke':'#fff'}) .attr("id", function(d,i){return "s"+i;}) .attr("d",arc) .append('image') .attr('xlink:href', 'path/to/image.png') .attr('height', '258') .attr('width', '257')

如果您想在路径上使用点击处理程序，则应在添加图像之前将其放置，如下所示：

return group.append("path") .attr({"fill":"none",'stroke-width':5,'stroke':'#fff'}) .attr("id", function(d,i){return "s"+i;}) .attr("d",arc) .on('click', /*insert function name or anonymous function*/) .append('image') .attr('xlink:href', 'path/to/image.png') .attr('height', '258') .attr('width', '257')

如果你想将它附加到图像上，你可以使用相同的一小段代码，只需要进一步向下，这样它就会附加到图像上

return group.append("path") .attr({"fill":"none",'stroke-width':5,'stroke':'#fff'}) .attr("id", function(d,i){return "s"+i;}) .attr("d",arc) .append('image') .attr('xlink:href', 'path/to/image.png') .attr('height', '258') .attr('width', '257') .on('click', /*insert function name or anonymous function*/)

d3还能够进行符合d3.transition()格式的转换。我并没有真正用d3进入转换过程，但Visual.ly做了一个great blog post来解释它们的基础知识。 d3's API在解释它们如何运作方面也非常彻底

d3js - 图像未显示为弧形

1 个答案: