Question

我为详细视图创建了plunker。

我想在矩形红框中添加悬停的图表点。

需要帮助。

Thanks in advance.

Answer 1

在您的代码中，您要在rect DOM中附加文本。这就是你没有看到文字的原因。

解决方案是第1步：

创建文本（在我们的案例中为3文本）

var textG = mouseG.append('text')
                .attr('y',height+25)
                .attr('font-family',"sans-serif")
                .attr('font-size',"8")
                .attr('fill', 'Black')
                .style("text-anchor", "middle")
var textB = mouseG.append('text')
                .attr('y',height+15)
                .attr('font-family',"sans-serif")
                .attr('font-size',"8")
                .attr('fill', 'Black')
                .style("text-anchor", "middle")
var textR = mouseG.append('text')
                .attr('y',height + 8)
                .attr('font-family',"sans-serif")
                .attr('font-size',"8")
                .attr('fill', 'Black')
                .style("text-anchor", "middle")

第2步：

在鼠标输出时使不透明度为0.

    d3.select("#test")
      .style("opacity", "0");
    textG
      .style("opacity", "0");
    textB
      .style("opacity", "0");
    textR
      .style("opacity", "0");

由于您不想在鼠标移出时看到文本。

第3步：

鼠标悬停时，设置文本DOM的文本和x

        if (i ==2){
          textG.text(y.invert(pos.y).toFixed(2))
                  .attr('x',mouse[0])
        } 
        if (i ==1){
          textB.text(y.invert(pos.y).toFixed(2))
                  .attr('x',mouse[0])
        } 
        if (i ==0){
          textR.text(y.invert(pos.y).toFixed(2))
                  .attr('x',mouse[0])
        }

工作代码here

在d3.js中添加矩形值

1 个答案: