javascript - D3 在工具提示中插入图表

Question

我试图在工具提示中插入饼图(但不确定是否可能......)并最终得到以下代码:

    var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(
        function(d) { if (d.company == "A" || d.company == "B") {
           return "Company: <span style='color:#ccff33'>"  + d.company+ " </span>"; 
        }

            else {

            var data = [60,40];
            var r = 100;

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

            var base = d3.select(this)

            var svg = base.append("svg")
                .attr("width", 500)
                .attr("height", 500);

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

            var arc = d3.svg.arc()
            .innerRadius(10)
            .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); })



            }
        }



  );

 baseSvg.call(tip);

文本的第一个条件工作正常，但是应该绘制饼图的其他部分没有返回任何内容，我已经挣扎了几天。我认为我的错误来自选择部分，但无法弄清楚。我需要在工具提示中弹出饼图。

非常感谢您的帮助。

Answer 1

“但是应该绘制饼图的 Else 部分不会返回任何内容”

这正是它失败的原因，该函数返回 null，然后清除工具提示的 html 属性，覆盖您刚刚小心地放置在提示中的内容。

在代码末尾尝试一下:

return base.html();

这就是您刚刚放入工具提示中的所有内容，转换为 html 字符串，然后工具提示会将其复制到现有(且相同)的 html 上。