亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

具有鼠標懸停工具提示的多重系列折線圖

具有鼠標懸停工具提示的多重系列折線圖

慕的地10843 2019-08-28 14:26:52
具有鼠標懸停工具提示的多重系列折線圖我使用這個bl.ocks.org代碼示例創建了一個多系列折線圖。我已經設法在JSFiddle上重新創建它。現在,我正在嘗試添加一個x值鼠標懸停工具提示,當您懸停其垂直位置時,它會顯示每行的工具提示。事情是這樣的,但對于多行。我發現這個StackOverflow答案(它包括一個JSFiddle),但我似乎無法使它與我的多重系列折線圖一起工作。svg.append("path") // this is the black vertical line to follow mouse   .attr("class","mouseLine")     .style("stroke","black")   .style("stroke-width", "1px")   .style("opacity", "0");var mouseCircle = causation.append("g") // for each line, add group to hold text and circle       .attr("class","mouseCircle"); mouseCircle.append("circle") // add a circle to follow along path   .attr("r", 7)   .style("stroke", function(d) { console.log(d); return color(d.key); })   .style("fill","none")   .style("stroke-width", "1px"); mouseCircle.append("text")   .attr("transform", "translate(10,3)"); // text to hold coordinatesvar bisect = d3.bisector(function(d)    .attr('width', width) // can't catch mouse events on a g element   .attr('height', height)   .attr('fill', 'none')   .attr('pointer-events', 'all')   .on('mouseout', function(){ // on mouse out hide line, circles and text         d3.select(".mouseLine")             .style("opacity", "0");         d3.selectAll(".mouseCircle circle")             .style("opacity", "0");       d3.selectAll(".mouseCircle text")             .style("opacity", "0");   })   .on('mouseover', function(){ // on mouse in show line, circles and text         d3.select(".mouseLine")             .style("opacity", "1");          d3.selectAll(".mouseCircle circle")             .style("opacity", "1");         d3.selectAll(".mouseCircle text")             .style("opacity", "1");   })   });所以,簡單地說,我想將我的折線圖JSFiddle與這個工具提示JSFiddle結合起來。有人知道怎么做這個嗎?或者是否有更簡單的方法來創建這樣的工具提示?任何幫助表示贊賞!
查看完整描述

1 回答

  • 1 回答
  • 0 關注
  • 457 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號