javascript - 尝试将背景图像添加到 D3 圈子

Question

我正在尝试创建以下气泡图，其中每个气泡都有水果图像。我在控制台中没有收到错误，并且控制台正确打印水果名称，但水果图像不显示。我缺少什么。我认为这可能是说我在 for 循环内添加了 fill 属性，但我已经尝试了该顺序但没有成功。

var diameter = 500, //max size of the bubbles
    color    = d3.scale.category20b(); //color category

var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);

var svg = d3.select("body")
    .append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

d3.csv("fruit.csv", function(error, data){

    //convert numerical values from strings to numbers
    data = data.map(function(d){ d.value = +d["Amount"]; return d; });


    //bubbles needs very specific format, convert data to this.
    var nodes = bubble.nodes({children:data}).filter(function(d) { return !d.children; });

    //setup the chart
    var bubbles = svg.append("g")
        .attr("transform", "translate(0,0)")
        .selectAll(".bubble")
        .data(nodes)
        .enter();

    //create the bubbles
    bubbles.append("circle")
        .attr("id", function(d) { return d.Fruit; })
        .attr("r", function(d){ return d.r; })
        .attr("cx", function(d){ return d.x; })
        .attr("cy", function(d){ return d.y; })
        .style("fill", function(d) { return color(d.value); });

    //format the text for each bubble
    bubbles.append("text")
        .attr("x", function(d){ return d.x; })
        .attr("y", function(d){ return d.y + 5; })
        .attr("text-anchor", "middle")
        .text(function(d){ return d["Fruit"]; })
        .style({
            "fill":"white", 
            "font-family":"Helvetica Neue, Helvetica, Arial, san-serif",
            "font-size": "12px"
        });

    var defs = svg.append("defs");

    var circles = document.getElementsByTagName("circle");

    for (var i = 0; i < circles.length; i++) {

        var fruit = circles[i].id;

        defs.append("pattern")
            .attr("height","100%")
            .attr("width", "100%")
            .attr("patternContentUnits", "objectBoundingBox")
            .append("image")
            .attr("height",1)
            .attr("width",1)
            .attr("preserveAspectRatio","none")
            .attr("xlink:href", fruit+".jpg"); 

        d3.select("#"+fruit)
            .attr("fill", "url(#" + fruit + ")");

        console.log(circles[i].id);

    }

})

Answer 1

您的代码现在的问题是您没有为 <patterns> 设置任何 ID .

除此之外，您还试图覆盖 fill之前使用 style() 设置...

.style("fill", function(d) { return color(d.value); });

...带有 attr()方法:

.attr("fill", "url(#" + fruit + ")");

最后，去掉 for环形。作为一般规则，在使用 D3 附加/创建元素时避免循环。

因此，总结一个解决方案，您可以使用简单的“输入”选择来附加模式，并使用 d.Fruits 设置它们的 ID。并设置圆圈' fill根据模式 ID:

var defs = svg.append("defs");

defs.selectAll(null)
    .data(nodes)
    .enter()
    .append("pattern")
    .attr("id", function(d){
        return d.Fruit
    })//set the id here
    .attr("height", "100%")
    .attr("width", "100%")
    .attr("patternContentUnits", "objectBoundingBox")
    .append("image")
    .attr("height", 1)
    .attr("width", 1)
    .attr("preserveAspectRatio", "none")
    .attr("xlink:href", function(d) {
        return d.Fruit + ".jpg"
    });

bubbles.append("circle")
    .attr("id", function(d) {
        return d.Fruit;
    })
    .attr("r", function(d) {
        return d.r;
    })
    .attr("cx", function(d) {
        return d.x;
    })
    .attr("cy", function(d) {
        return d.y;
    })
    .style("fill", function(d) {
        return "url(#" + d.Fruit + ")";
    });//fill the circles according to the pattern's id