C3.js自定義工具提示動畫onmouseover

我有c3.js庫，我試圖從生成的圖表中的特定區域的所有點上重現「鼠標懸停」動畫。要清楚，我要的是接下來的圖像中：C3.js自定義工具提示動畫onmouseover

正如你所看到的，工具提示是「不分組」，但他們當鼠標在共同所有觸發面積爲4分。而這些工具提示顯然不遵循鼠標指針。

這裏是在圖像中的圖上的一些細節：

有2種類型的視覺數據，「花鍵」和「bar」
「扎」的工具尖端的數據始終顯示在頂部，無論如何。

我想有完全相同的動畫包括：

在「酒吧」刀尖頂（FR，7月28日）
的「欄」工具日期（4）
懸停動畫上的白色虛線（不會另外顯示）
當鼠標位於公共區域時，所有其他工具提示。

這是我到目前爲止有：

var chart = c3.generate({ 
     "bindto": "#chart", 
     "data": { 
      "columns": [ 
       ["def", 0], 
       ["AAA", "0.00", "0.00", "33.33", "28.57", "28.57", "25.00", "25.00", "30.77"], 
       ["BBB", "50.00", "33.33", "42.86", "42.86", "30.00", "28.57", "35.29", "35.29"], 
       ["CCC", "33.33", "25.54", "37.64", "33.33", "33.33", "33.33", "25.00", "15.15"], 
       ["IMP", "50", "49", "65", "20", "38", "17", "44", "30"] 
      ], 
      "types": { 
       "def": "line", 
       "AAA": "spline", 
       "BBB": "spline", 
       "CCC": "spline", "IMP": "bar" 
      }, 
      "axes": {"IMP": "y2"} 
     }, 
     "size": { 
      "height": 360 
     }, 
     "color": { 
      "pattern": ["transparent", "#01d8dd", "#ff6400", "#ff56d5", "#808080"] 
     }, 
     "tooltip": { 
      "grouped": false, 
      "format": {} 
     }, 
     "grid": { 
      "y": { 
       "show": true 
      } 
     }, 
     "axis": { 
      "x": { 
       "type": "category", 
       "categories": ["02", "03", "04", "05", "06", "07", "08", "09"] 
      }, 
      "y": { 
       "max": 50, 
       "padding": 3, 
       "label": { 
        "text": "PERCENTAGE", 
        "position": "outer-middle" 
       } 
      }, 
      "y2": { 
       "show": true, 
       "max": 90, 
       "label": { 
        "text": "IMPRESSIONS", 
        "position": "outer-middle" 
       } 
      } 
     }, 
     "point": { 
      "r": 3 
     }});

JS fiddle

感謝

來源

2017-07-29 user1626498

你有沒有嘗試設置' 「提示」：{ 「分組」：TRUE'？這可能就像你打算用c3開箱即可得到的一樣。其他任何東西都將是一個非常自定義的'd3'入侵。 – Mark

正如我在我的評論說，你希望列表最終將會是一個非常定製在c3.js以外完成實施。下面是它的快速刺讓你去：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link data-require="[email protected]" data-semver="0.4.11" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" /> 
 
    <script data-require="[email protected]" data-semver="0.4.11" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script> 
 
    <script data-require="[email protected]" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <div id="chart"></div> 
 
    <script> 
 
    var chart = c3.generate({ 
 
     "bindto": "#chart", 
 
     "data": { 
 
     "columns": [ 
 
      ["def", 0], 
 
      ["AAA", "0.00", "0.00", "33.33", "28.57", "28.57", "25.00", "25.00", "30.77"], 
 
      ["BBB", "50.00", "33.33", "42.86", "42.86", "30.00", "28.57", "35.29", "35.29"], 
 
      ["CCC", "33.33", "25.54", "37.64", "33.33", "33.33", "33.33", "25.00", "15.15"], 
 
      ["IMP", "50", "49", "65", "20", "38", "17", "44", "30"], 
 
      ["IMP", "50", "49", "65", "20", "38", "17", "44", "30"], 
 
      ["IMP", "50", "49", "65", "20", "38", "17", "44", "30"], 
 
      ["IMP", "50", "49", "65", "20", "38", "17", "44", "30"], 
 
      ["IMP", "50", "49", "65", "20", "38", "17", "44", "30"], 
 
      ["IMP", "50", "49", "65", "20", "38", "17", "44", "30"], 
 
      ["IMP", "50", "49", "65", "20", "38", "17", "44", "30"], 
 
      ["IMP", "50", "49", "65", "20", "38", "17", "44", "30"] 
 
     ], 
 
     "types": { 
 
      "def": "line", 
 
      "AAA": "spline", 
 
      "BBB": "spline", 
 
      "CCC": "spline", 
 
      "IMP": "bar" 
 
     }, 
 
     "axes": { 
 
      "IMP": "y2" 
 
     }, 
 
     "onmouseover": customOver, 
 
     "onmouseout": customOut 
 
     }, 
 
     "size": { 
 
     "height": 360 
 
     }, 
 
     "color": { 
 
     "pattern": ["transparent", "#01d8dd", "#ff6400", "#ff56d5", "#808080"] 
 
     }, 
 
     "tooltip": { 
 
     "show": false 
 
     }, 
 
     "grid": { 
 
     "y": { 
 
      "show": true 
 
     } 
 
     }, 
 
     "axis": { 
 
     "x": { 
 
      "type": "category", 
 
      "categories": ["02", "03", "04", "05", "06", "07", "08", "09"] 
 
     }, 
 
     "y": { 
 
      "max": 50, 
 
      "padding": 3, 
 
      "label": { 
 
      "text": "PERCENTAGE", 
 
      "position": "outer-middle" 
 
      } 
 
     }, 
 
     "y2": { 
 
      "show": true, 
 
      "max": 90, 
 
      "label": { 
 
      "text": "IMPRESSIONS", 
 
      "position": "outer-middle" 
 
      } 
 
     } 
 
     }, 
 
     "point": { 
 
     "r": 3 
 
     } 
 
    }); 
 
    
 
    function customOver(d,i){ 
 
     var xScale = this.internal.x, 
 
      yScale1 = this.internal.y, 
 
      yScale2 = this.internal.y2, 
 
      g = this.internal.main; 
 
      
 
     if (d.id == "IMP"){ 
 
     
 
     g.append('path') 
 
      .attr('class', 'tip-line') 
 
      .attr('d', 'M' + xScale(d.x) + ',0L' + xScale(d.x) + ',' + this.internal.height) 
 
      .style('stroke-dasharray', '5, 5'); 
 
     
 
     var t = g.append('g') 
 
      .attr('class', 'tooltip') 
 
      .attr('transform', 'translate(' + xScale(d.x) + ',' + 5 + ')'); 
 
     
 
     t.append('rect') 
 
      .attr('rx', 5) 
 
      .attr('width', 50) 
 
      .attr('height', 20) 
 
      .attr('x', -25) 
 
      .style('fill','#555'); 
 

 
     t.append('text') 
 
      .text(d.x) 
 
      .style('text-anchor', 'middle') 
 
      .style('fill', 'white') 
 
      .attr('dy', '1.3em') 
 

 
     } else { 
 
     
 
     var t = g.append('g') 
 
      .attr('class', 'tooltip') 
 
      .attr('transform', 'translate(' + xScale(d.x) + ',' + yScale1(d.value) + ')'); 
 
     
 
     t.append('rect') 
 
      .attr('rx', 5) 
 
      .attr('width', 50) 
 
      .attr('height', 20) 
 
      .attr('x', -50) 
 
      .attr('y', -10) 
 
      .style('fill','#555'); 
 

 
     t.append('text') 
 
      .text(d.value) 
 
      .style('text-anchor', 'end') 
 
      .style('fill', 'white') 
 
      .attr('dx', '-10') 
 
      .attr('dy', '0.5em') 
 
     } 
 
    } 
 
    
 
    function customOut(){ 
 
     d3.selectAll('.tooltip').remove(); 
 
     d3.select('.tip-line').remove(); 
 
    } 
 
    
 
    </script> 
 
</body> 
 

 
</html>

來源

2017-07-30 14:44:03 Mark

太棒了！非常感謝 – user1626498

C3.js自定義工具提示動畫onmouseover

回答

相關問題