工具提示位置在D3漏斗图中无法正常工作

时间:2018-09-19 11:59:28

标签: javascript d3.js

我正在尝试制作d3水平漏斗图。

一切正常,但工具提示位置却无法正常工作,它出现在其他位置。

这是我的代码:

const data = [
                ["L0", 10],
    ["L1", 0],
    ["L2", 5],
    ["L3", 10],
    ["L4", 3],
    ["L5", 10]
                
            ];
            newdata = data.map(function (d,i){
              var new_d = d
              if (new_d[1] == 0){
                 new_d[1] = 0.50
              }
              return new_d
            })
            
            const options = {
                chart: {
                    width: 200,
                    height: 450,
                    bottomWidth: 1 / 2,
                    bottomPinch: 1,
                    
                },
                block: {
                    dynamicSlope: true,
                    dynamicHeight: true,
                    minHeight:50
                    
                    
                    
                },
                label: {
                    enabled: true,
                    fontSize: '18px',
                    fill: '#fff',
                    /* format: '{l}: {f}' */
                   format: function(label, value) {
                    console.log('value', value);
                    if(value ==0.50){
                      var a=0;
                      return label+ ":" + a;
                    }else{
                                          return label+ ":" + value;
                    }
                            
                                    }
                                    },
              tooltip: {
                   enabled: true,
                format: '{l}: {f}'
                } 
            };

            const chart = new D3Funnel('#funnel');
            chart.draw(newdata, options);
<script src="https://d3js.org/d3.v4.js"></script>
 <script src="https://rawgit.com/jakezatecky/d3-funnel/master/dist/d3-funnel.min.js"></script>
 
 
  <div id="funnel" style="transform: rotate(270deg);height: 539px;width:1px;margin-left:267px;"></div>
  

(来自http://jsfiddle.net/3x265bLj/79/

0 个答案:

没有答案