从 v3 迁移到 v4 - 工具提示未显示在 d3 中

Question

我使用this 参考创建了一个散点图。该代码在 v3 中运行良好，但在将其更改为 v4 后，工具提示、x 轴和 y 轴不显示。

我创建了一个Plunker。如果有人能告诉我它有什么问题，我将不胜感激。

function showTooltip (d, i) {

    //Save the chosen circle (so not the voronoi)
    var element = d3.selectAll(".countries."+d.CountryCode);

    //Define and show the tooltip
    $(element).popover({
        placement: 'auto top',
        container: '#chart',
        trigger: 'manual',
        html : true,
        content: function() {
            return "<span style='font-size: 12px; text-align: center;'>" + "<span>" + "Speaker: " + "</span>" + d.Speaker + "\n"
            + "<span>" + "Duration: " + "</span>" + Math.round(d.Duration) + "\n" +"</span>"; }
    });
    $(element).popover('show');

    //Make chosen circle more visible
    element.style("opacity", 1)
        .style("stroke-width", 6);

更新：

This 是 v4 d3 中此散点图的更正版本。我在 Lary 的帮助下更正了它。

Answer 1

为：

x轴和y轴不显示

只需删除：

 .axis .domain {
      display: none;
    }

来自风格

为：

工具提示，线条

showtooltip 函数内部的变化：

var element = d3.select(".countries."+d.CountryCode);

    //Define and show the tooltip
    $(element.node()).popover({
        placement: 'auto top',
        container: '#chart',
        trigger: 'manual',
        html : true,
        content: function() {
            return "<span style='font-size: 12px; text-align: center;'>" + "<span>" + "Speaker: " + "</span>" + d.Speaker + "\n"
            + "<span>" + "Duration: " + "</span>" + Math.round(d.Duration) + "\n" +"</span>"; }
    });
    $(element.node()).popover('show');

//Make chosen circle more visible
element.style("opacity", 1)
    .style("stroke-width", 6);

//Append lines to bubbles that will be used to show the precise data points
//vertical line
d3.select(".chordWrapper").append("g")
    .attr("class", "guide")
    .append("line")
        .attr("x1", element.attr("cx"))
        .attr("x2", element.attr("cx"))
        .attr("y1", +element.attr("cy"))
        .attr("y2", (height))
        .style("stroke", element.style("fill"))
        .style("opacity",  0)
        .style("pointer-events", "none")
        .transition().duration(200)
        .style("opacity", 0.5);
//horizontal line
d3.select(".chordWrapper").append("g")
    .attr("class", "guide")
    .append("line")
        .attr("x1", +element.attr("cx"))
        .attr("x2", 0)
        .attr("y1", element.attr("cy"))
        .attr("y2", element.attr("cy"))
        .style("stroke",  element.style("fill"))
        .style("opacity",  0)
        .style("pointer-events", "none")
        .transition().duration(200)
        .style("opacity", 0.5);

并添加：

.on("mouseover", showTooltip)
.on("mouseout",  removeTooltip);

到你的圈子（script.js 第 84 行）

看这里：

https://embed.plnkr.co/86jdbWgHtABY95ZEv9SE/