Question

我试图有条件地改变用D3创建的一些圆圈的背景但我无法获得if else逻辑来正确选择正确的图片。代码直接进入default.gif的最后else语句。我在控制台中没有看到任何错误。所有图像都与html文件位于同一目录中。

var diameter = 500, //max size of the bubbles
    format   = d3.format(",d"),
    color    = d3.scaleOrdinal(d3.schemeCategory20c); //color category

var bubble = d3.pack()
    .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){
    if (error) throw error;

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

    //Sets up a hierarchy of data object
    var root = d3.hierarchy({children:data})
      .sum(function(d) { return d.value; })
      .sort(function(a, b) { return b.value - a.value; });

    //Once we have hierarchal data, run bubble generator
    bubble(root);

    //setup the chart
    var bubbles = svg.selectAll(".bubble")
        .data(root.children)
        .enter();

    //create the bubbles
    bubbles.append("circle")
        .attr("class", "circle")
        .attr("r", function(d){ return d.r; })
        .attr("cx", function(d){ return d.x; })
        .attr("cy", function(d){ return d.y; })
        .append("defs")
        .append("pattern")
        .append("image")
        .attr("xlink:href", function(d) {
            if ( d.Fruit == "Apple") {
                return "apple.jpg";
            }
            else if (d.Fruit == "Pear") {
                return "pear.jpg"
            }
            else if (d.Fruit == "Banana") {
                return "banana.jpg";
            }
            else if (d.Fruit == "Strawberry") {
                return "strawberry.jpg";
            }
            else if (d.Fruit == "Grapes") {
                return "grapes.jpg";
            }
            else { return "default.gif"; }
        });
        //.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.data["Fruit"]; })
        .style("fill","white")
        .style("font-family", "Helvetica Neue, Helvetica, Arial, san-serif")
        .style("font-size", "12px");
});

csv文件包含以下数据：水果，金额苹果，32 梨，13 香蕉，25 葡萄，29 草莓，36

Answer 1

正如我在评论中所说的那样，我很惊讶你能看到任何像圈子一样的东西。后台，因为您创建/引用模式的代码不正确。有关快速说明，请查看我的answer here。

但是，我在这里只讨论您的主要问题，即if声明。

问题是您正在使用d3.hierarchy来创建数据阵列。因此，所有数据都在node.data内。根据API：

返回的节点和每个后代具有以下属性：


node.data - 指定给构造函数的关联数据。

因此，对于您的条件，而不是：

d.Fruit == "Apple"

应该是：

d.data.Fruit == "Apple"

d.data.Fruit == "Pear"，d.data.Fruit == "Banana"等同样......

有条件地改变D3圈的背景图像

1 个答案: