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

这与这个问题有关： 其中@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);

var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[-10,0]）
.html(
函数（d）{if（d.company==“A”| | d.company==“B”）{
如果（d.name==“C”）{return”“；}
其他{return“Competitors:”+d.Competitors+”
产品/服务：“+d.nbProducts+”
分部收入（公司）：$”+d.compSegRev+“M
分部收入（总额）：$”+d.totSegRev+“M”；
}
}
else{if（d.name==“C”）{return”“；}
否则{
//第一个饼图
var数据=[d.salesA，d.salesB]；
var r=10；
var color=d3.scale.ordinal（）
.范围（[“#33abf9”，“橙色”）；
var base=d3。选择（此）
base.html（null）；
var svg=base.append（“svg”）
.attr（“宽度”，20）
.attr（“高度”，20）
.attr（“id”、“pie-1”）；
var group=svg.append（“g”）
.attr（“转换”、“翻译”（“+r+”，“+r+”））；
var arc=d3.svg.arc（）
.内半径（0）
.外层（r）；
var pie=d3.layout.pie（）
.value（函数（d）{返回d；}）；
变量弧=组。选择全部（“.arc”）
.数据（pie（数据））
.输入（）
.附加（“g”）
.attr（“类”、“弧”）；
arcs.append（“路径”）
.attr（“d”，弧）
.attr（“fill”，函数（d）{返回颜色（d.data）；}）；
//第二个柱状图
变量数据2=[d.BudgetA，d.BudgetB]；
var r2=10；
var color2=d3.scale.ordinal（）
.范围（[“#33abf9”，“橙色”）；
var base2=d3。选择（此）
base2.html（空）；
var svg2=base2.append（“svg”）
.attr（“宽度”，20）
.attr（“高度”，20）
.attr（“id”、“pie-2”）；
var group2=svg2.append（“g”）
.attr（“转换”、“翻译”（“+r+”，“+r+”））；
var arc2=d3.svg.arc（）
.内半径（0）
.外层（r2）；
var pie2=d3.layout.pie（）
.value（函数（d）{返回d；}）；
var arcs2=group2.selectAll（“.arc2”）
.数据（pie2（数据2））
.输入（）
.附加（“g”）
.attr（“类别”、“arc2”）；
arcs2.追加（“路径”）
.attr（“d”，弧）
.attr（“fill”，函数（d）{return color2（d.data2）；}）；
return“Employees:+d.nbEmployees+”
客户：+d.nbClients+“
销售：$”+d.TotSales+“M”
+base.html（）
+“
预算：$”+d.totBudget+M”
+base2.html（）；
}
}
}
)   
baseSvg.call（提示）；

提示中显示了两个图表，但显示了相同的错误颜色/角度，好像它们混淆了一样。 我不能在两者之间使用闭包，因为我使用了代码中前一部分的数据

---

非常感谢您的帮助。谢谢

我很惊讶在创建了第一个派之后出现了两个派，因为它看起来像你

base2.html（null）

，我本以为第一个派会被抹掉

不管怎样，我认为你的颜色是错误的，因为你是这样访问色阶-->

d、 数据不存在，如果它存在，也不会映射到2元素的颜色域，所以如果你想区分块，就按索引来做，应该是这样的

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

从长远来看，如果您将数据整理成一个嵌套的数组，并且像这样做，您也不需要单独构建每个svg-->

---

谢谢@mgraham。我懂了。我从小提琴上实现了代码（非常感谢！），现在我看到了两个具有正确角度和颜色的馅饼。但是如果我正确理解了这段代码，那么这两个馅饼将同时返回。有没有一种方法可以单独检索它们，因为我需要的结果是：[code]return“parte of text”+PIE1+“
parte of text”+PIE2；[code]？您必须稍微超出d3，因为svg元素上的

.html（）

不会返回封闭的svg标记。Do

var s=[]；base.selectAll（“svg”）.each（function（）{s.push（this.outerHTML（））；}

-这将把所有svg html字符串（包括svg标记）存储在一个数组中，然后您可以将其作为s[0]添加到返回的字符串中etcOnce再次出现，问题解决了。我不得不删除

outerHTML

之后的双括号，尽管我有一个错误，比如outerHTML不是函数，所以我必须使用：

var s=[]；base.selectAll（“svg”）.each（function（）{s.push（this.outerHTML）；}）

非常感谢@mgraham的清晰详细解释。我必须在从头开始学习d3的同时提供一些东西，您的帮助非常有用。

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