Question

我定义了工具提示：

 g.selectAll("dot")
        .data(Dataset)
        .enter().append("circle")
        .attr("r", 3)
        .attr("cx", function(d) { return xScale(d.date); })
        .attr("cy", function(d) { return yS(d.value[a]); })
        .on("mouseover", function(d) {
            tooltip.transition()
                 .duration(200)
                 .style("opacity", .9);
            tooltip.html(d["date"] + "<br/> (" +"TEST"+ ")")
                 .style("left", (d3.event.pageX + 5) + "px")
                 .style("top", (d3.event.pageY - 28) + "px");
        })
        .on("mouseout", function(d) {
            tooltip.transition()
                 .duration(500)
                 .style("opacity", 0);
        });

然后像我在各种示例中看到的那样使用它：

# define your variables
phoneTier = 2
newTier = 3
name$ = "syllable"
regexFirst$ = "M"
regexLast$ = "T"

# use this to add a new tier in each text grid
select TextGrid 'soundname$'
Insert interval tier: newTier, name$

# loop through the phones to find the start time of the syllable
# put this in the for loop that loops through each textgrid
phoneInt = Get number of intervals... phoneTier
for i from 1 to phoneInt-3
    label$ = Get label of interval... i phoneTier
    labelNext$ = Get label of interval... i+3 phoneTier
    if index_regex(label$, regexFirst$) & index_regex(labelNext$, regexLast$)
        start = Get starting point... i phoneTier
        end = Get end point... i+3 phoneTier
        Insert boundary... newTier start
        Insert boundary... newTier end
        syllableInterval = Get low interval at time: newTier, end
        Set interval text... newTier syllableInterval "syllable"
    endif
endfor

但是，没有任何显示。控制台中没有错误。我确认正确地调用了“ mouseover”，仅此而已。这段代码有什么问题？

Answer 1

我假设您正在使用d3 v4 / v5。只需将工具提示更改为：

var tooltip = d3.select("#target").select(".tooltip").data([0]);
tooltip = tooltip.enter().append("div")
    .attr("class", "tooltip")
    .merge(tooltip)
    .style("opacity", 50)
    .attr("style", "position: absolute; pointer-events: none; background:lightsteelblue; width:200px;height:28px;")

您可以了解d3常规更新模式here。

我还为此创建了一个简单的fiddle。

工具提示未显示在图表中

1 个答案: