Javascript 在线设置动画后向线图数据点添加工具提示

我有一个有两条线的基本线图。当我单击一个按钮时，两条线中的一条将绘制在图形上

我使用stroke dasharray绘制线条

有人知道我如何在我的行中添加工具提示吗？ 使用stroke dasharray会让它更难吗

这是我的密码

var button=d3.select("#button");

//defines canvas (area in which graph is placed)    
var margin = {top: 30, right: 20, bottom: 50, left: 60},
width = 800 - margin.left - margin.right,
height = 700 - margin.top - margin.bottom;

var parseDate = d3.time.format("%d-%b-%y").parse;

//OUTPUT RANGE
var x = d3.time.scale()
    .range([0, width]);

//OUTPUT RANGE    
var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis().scale(x)
    .orient("bottom")
    .ticks(5);

var yAxis = d3.svg.axis().scale(y)
    .orient("left")
    .ticks(5);

//assigns coordinates for each piece of data    
var valueline = d3.svg.line()
    .interpolate("interpolation")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

//second line data
var valueline2 = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.open); });

//create area for 'area' below line    
var area = d3.svg.area()
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.close); });    

//creates area to draw graph    
var svg = d3.select("body")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
//groups content    
.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

function make_x_axis() {
    return d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(5)
}

function make_y_axis() {
    return d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(30)
}

// csv callback function
d3.csv("myData3.csv", function(data) {

    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
        d.open = +d.open;
    });


//INPUT DOMAINS
//.extent() returns min and max values of argument
x.domain(d3.extent(data, function(d) { return d.date; }));
//returns max of whichever set of data is bigger
y.domain([0, d3.max(data, function(d) { return Math.max(d.close, d.open); })]);


 d3.select("#button1").on("click", function(){ 
      var path = svg.append("path")   // Add the valueline path. 
          .attr("class", "line")
          .attr("d", valueline(data))
          .attr("stroke", "steelblue")
          .attr("stroke-width", "5")
          .attr("fill", "none");

  var totalLength = path.node().getTotalLength();

  path
    .attr("stroke-dasharray", totalLength + "30" * 30)
    .attr("stroke-dashoffset", totalLength)
    .transition()
      .duration(2000)
      .ease("linear")
      .attr("stroke-dashoffset", 0);

     })

 d3.select("#button2").on("click", function(){ 
      var path2 = svg.append("path")        // Add the valueline path. 
          .attr("class", "line2")
          .attr("d", valueline2(data))
          .attr("stroke", "steelblue")
          .attr("stroke-width", "5")
          .attr("fill", "none");

  var totalLength = path2.node().getTotalLength();


  path2
    .attr("stroke-dasharray", totalLength + "30" * 30)
    .attr("stroke-dashoffset", totalLength)
    .transition()
      .duration(2000)
      .ease("linear")
      .attr("stroke-dashoffset", 0)
     })       


svg.append("g") // Add the X Axis
    .attr("class", "x axis")
    //moves x axis to bottom of graph
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

//text label for x-axis    
svg.append("text") // text label for the x axis
    .attr("transform", "translate(" + (width / 2) + " ," + (height + margin.bottom - 5 ) + ")")
    .style("text-anchor", "middle")
    .text("Date");

svg.append("g") // Add the Y Axis
    .attr("class", "y axis")
    .call(yAxis);

//text label for y-axis    
svg.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 0 - margin.left)
    .attr("x",0 - (height / 2))
    //adds extra left padding as original y pos = 0
    .attr("dy", "1em")
    .style("text-anchor", "middle")
    .text("Value");


//adding a title to the graph
svg.append("text")
    .attr("x", (width / 2))
    .attr("y", 0 - (margin.top / 2))
    .attr("text-anchor", "middle")
    .style("font-size", "16px")
    .style("text-decoration", "underline")
    .text("Graph");


//draw x axis grid    
svg.append("g")
    .attr("class", "grid")
    .attr("transform", "translate(0," + height + ")")
    .call(make_x_axis()
    .tickSize(-height, 0, 0)
    .tickFormat("")
)

//draw y axis grid
svg.append("g")
    .attr("class", "grid")
    .call(make_y_axis()
    .tickSize(-width, 0, 0)
    .tickFormat("")
)

});<!--d3.csv close-->​

var按钮=d3.选择（“按钮”）；
//定义画布（放置图形的区域）
var margin={顶部：30，右侧：20，底部：50，左侧：60}，
宽度=800-边距.左-边距.右，
高度=700-margin.top-margin.bottom；
var parseDate=d3.time.format（“%d-%b-%y”）.parse；
//输出范围
var x=d3.time.scale（）
.范围（[0，宽度]）；
//输出范围
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）.scale（x）
.orient（“底部”）
.蜱（5）；
var yAxis=d3.svg.axis（）.scale（y）
.东方（“左”）
.蜱（5）；
//为每个数据段指定坐标
var valueline=d3.svg.line（）
.插入（“插入”）
.x（函数（d）{返回x（d.date）；}）
.y（函数（d）{返回y（d.close）；}）；
//二线数据
var valueline2=d3.svg.line（）
.x（函数（d）{返回x（d.date）；}）
.y（函数（d）{返回y（d.open）；}）；
//为行下方的“区域”创建区域
var area=d3.svg.area（）
.x（函数（d）{返回x（d.date）；}）
.y0（高度）
.y1（函数（d）{返回y（d.close）；}）；
//创建要绘制图形的区域
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
//组内容
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
函数make_x_轴（）{
返回d3.svg.axis（）
.比例（x）
.orient（“底部”）
.滴答声（5）
}
函数make_y_轴（）{
返回d3.svg.axis（）
.比例（y）
.东方（“左”）
.滴答声（30）
}
//csv回调函数
d3.csv（“myData3.csv”，函数（数据）{
data.forEach（函数（d）{
d、 日期=解析日期（d.date）；
d、 close=+d.close；
d、 open=+d.open；
});
//输入域
//.extent（）返回参数的最小值和最大值
x、 域（d3.extent（数据，函数（d）{返回d.date；}））；
//返回较大数据集的最大值
y、 域（[0，d3.max（数据，函数（d）{return Math.max（d.close，d.open）；}）]；
d3.选择（“#按钮1”）。单击（“单击”，函数（）{
var path=svg.append（“path”）//添加valueline路径。
.attr（“类”、“行”）
.attr（“d”，valueline（数据））
.attr（“笔划”、“钢蓝”）
.attr（“笔划宽度”、“5”）
.attr（“填充”、“无”）；
var totalLength=path.node（）.getTotalLength（）；
路径
.attr（“笔划数组”，总长度+“30”*30）
.attr（“行程偏移”，总长度）
.transition（）
.期限（2000年）
.ease（“线性”）
.attr（“行程偏移”，0）；
})
d3.选择（“#按钮2”）。在（“单击”，函数（）{
var path2=svg.append（“path”）//添加valueline路径。
.attr（“类别”、“第2行”）
.attr（“d”，值行2（数据））
.attr（“笔划”、“钢蓝”）
.attr（“笔划宽度”、“5”）
.attr（“填充”、“无”）；
var totalLength=path2.node（）.getTotalLength（）；
路径2
.attr（“笔划数组”，总长度+“30”*30）
.attr（“行程偏移”，总长度）
.transition（）
.期限（2000年）
.ease（“线性”）
.attr（“笔划偏移量”，0）
})       
svg.append（“g”）//添加X轴
.attr（“类”、“x轴”）
//将x轴移动到图形的底部
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
//x轴的文本标签
svg.append（“text”）//x轴的文本标签
.attr（“变换”、“平移”（+（宽度/2）+），“+（高度+边距.bottom-5）+”）
.style（“文本锚定”、“中间”）
.文本（“日期”）；
svg.append（“g”）//添加Y轴
.attr（“类”、“y轴”）
.呼叫（yAxis）；
//y轴的文本标签
svg.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，0-页边距。左）
.attr（“x”，0-（高度/2））
//将额外的左填充添加为原始y位置=0
.attr（“dy”、“1em”）
.style（“文本锚定”、“中间”）
.文本（“价值”）；
//向图表添加标题
svg.append（“文本”）
.attr（“x”，（宽度/2））
.attr（“y”，0-（margin.top/2））
.attr（“文本锚定”、“中间”）
.style（“字体大小”、“16px”）
.style（“文本装饰”、“下划线”）
.文本（“图形”）；
//绘制x轴网格
svg.append（“g”）
.attr（“类”、“网格”）
.attr（“变换”、“平移（0）”、“高度+”）
.调用（生成x轴（）
.tickSize（-height，0，0）
.tick格式（“”）
)
//绘制y轴网格
svg.append（“g”）
.attr（“类”、“网格”）
.调用（生成y轴（）
.tickSize（-width，0，0）
.tick格式（“”）
)
});​

---

提前谢谢

添加工具提示的最简单方法是将

svg:title

元素附加到需要工具提示的元素中。当您将鼠标悬停在图元上时，浏览器将自动显示该图元。它也适用于所有类型的元素

所以你的代码需要看起来像

var path = svg.append("path")   // Add the valueline path. 
      .attr("class", "line")
      .attr("d", valueline(data))
      .attr("stroke", "steelblue")
      .attr("stroke-width", "5")
      .attr("fill", "none")
      .append("title").text("whatever");

---

如果您需要更复杂的功能，您可以尝试使用类似的方法。

我这里有一个相同的例子，但不是在整行显示相同的工具提示，而是需要显示该点的值。在上面的代码中，我想显示X坐标和Y坐标值，而不是“随便什么”。我可以不用喝醉酒吗？如果连醉酒代码都不接受。但我不喜欢在每个数据点上画圆圈，因为我有大量的数据和许多行，所以，在数字上：10000点4行，对于这40000个圆圈，如果我附加只是为了实现工具提示的意思！