javascript - 从 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 中该散点图的修正版本。我在拉里的帮助下更正了它。

Answer 1

对于:

x-axis and y-axis not showing up

只需删除:

 .axis .domain {
      display: none;
    }

来自风格

对于:

tooltip,lines

更改 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/