Question

这与此问题有关： D3 inserting a chart within the tooltip @mgraham帮助我解决了我的问题并在工具提示中插入饼图。

现在我尝试使用不同的数据（在预算面前）在同一个工具提示中插入第二个饼图，我想出了这个代码：

var tip = d3.tip()
    .attr('class', 'd3-tip')
      .offset([-10, 0])
    .html(
        function(d) { if (d.company == "A" || d.company == "B") {
        if (d.name == "C") {return "<?PHP echo $compListA."<br/>".$compListB; ?>";} 
          else {return "Competitors: <span style='color:#ccff33'>"  + d.competitors + " </span><BR/> Products/Services: <span style='color:#ccff33'>" + d.nbProducts + " </span><BR/> Segment Revenue (Co.): <span style='color:#ccff33'>$" + d.compSegRev + " M </span>  <BR/> Segment Revenue (Total): <span style='color:#ccff33'>$" + d.totSegRev +" M </span> "; 
         }
    }
        else { if (d.name == "C") {return "<?PHP echo $compListA."<br/>".$compListB; ?>";}

            else {


        //First Pie Chart
        var data = [d.salesA, d.salesB];
        var r = 10;

        var color = d3.scale.ordinal()
            .range(["#33abf9", "orangered"]);

        var base = d3.select(this)

        base.html(null) ;

        var svg = base.append("svg")
            .attr("width", 20)
            .attr("height", 20)
            .attr("id", "pie-1");

        var group = svg.append("g")
          .attr("transform", "translate(" + r + "," + r + ")");

        var arc = d3.svg.arc()
        .innerRadius(0)
        .outerRadius(r);

        var pie = d3.layout.pie()
            .value(function (d) { return d;});

        var arcs = group.selectAll(".arc")
            .data(pie(data))
            .enter()
            .append("g")
            .attr("class", "arc");

        arcs.append("path")
            .attr("d", arc)
            .attr("fill", function (d) { return color(d.data); });


    //Second PieChart       
        var data2 = [d.BudgetA, d.BudgetB];
        var r2 = 10;

        var color2 = d3.scale.ordinal()
            .range(["#33abf9", "orangered"]);

        var base2 = d3.select(this)

        base2.html(null)    ;

        var svg2 = base2.append("svg")
            .attr("width", 20)
            .attr("height", 20)
            .attr("id", "pie-2");

        var group2 = svg2.append("g")
          .attr("transform", "translate(" + r + "," + r + ")");

        var arc2 = d3.svg.arc()
        .innerRadius(0)
        .outerRadius(r2);

        var pie2 = d3.layout.pie()
            .value(function (d) { return d;});

        var arcs2 = group2.selectAll(".arc2")
            .data(pie2(data2))
            .enter()
            .append("g")
            .attr("class", "arc2");

        arcs2.append("path")
            .attr("d", arc)
            .attr("fill", function (d) { return color2(d.data2); });

        return "Employees: <span style='color:#ccff33'>"  + d.nbEmployees+ " </span><BR/> Clients: <span style='color:#ccff33'>" + d.nbClients+ " </span> &nbsp;<BR/> Sales: <span style='color:#ccff33'>$" + d.TotSales + " M </span> &nbsp; " 
        + base.html()
        + "<BR/> Budget: <span style='color:#ccff33'>$" + d.totBudget+" M </span> "
        + base2.html(); 

            }



        }

    }
)   




baseSvg.call(tip);

2个图表确实显示在提示中，但显示相同的错误颜色/角度，就像它们混合在一起一样。我之间不能使用闭包，因为我使用了代码中前一篇文章中的数据。

非常感谢任何帮助。感谢

Answer 1

我很惊讶2个馅饼出现了，因为它看起来像你base2.html(null)在建造了第一个馅饼之后，我认为它会擦掉第一个馅饼......

无论如何我认为你的颜色是错误的，因为你正在访问这样的颜色标度 - ＆gt;

arcs.append("path")
            .attr("d", arc)
            .attr("fill", function (d) { return color(d.data); });

d.data不存在，如果没有，则不会映射到2元素的颜色域，所以如果要区分块，请按索引进行，这应该是这样的

arcs.append("path")
            .attr("d", arc)
            .attr("fill", function (d, i) { return color(i); });

从长远来看，如果你将你的数据整理成一个嵌套数组，并且在这个小提琴中，你就不需要单独构建每个svg - ＆gt;

https://jsfiddle.net/6d65yn7w/3/

D3在工具提示中插入2个SVG /图表

1 个答案: