dc.js：工具提示不顯示

我正在使用基於d3和crossfilter的Dimensional Charting javascript庫dc.js製作圖形。我是新的dc.js庫。我試圖顯示使用Django框架python.i我試圖顯示樣式工具提示，但不能display.i我試圖下面的代碼。dc.js：工具提示不顯示

 {% extends "base.html" %} 
    {% load staticfiles %} 
     {% block content %} 
    <head> 
    <link href="{% static 'css/dc.css' %}" rel="stylesheet" media="screen"> 
    </head> 
    <body> 
      <div class="container" style="margin-top: 140px"> 

      <div class="col-lg-4" id="test"> 

      </div> 

      <div class="col-lg-4" id="test1"> 

      </div> 

    <script type="text/javascript" src="{% static 'js/d3.js' %}"></script> 
    <script type="text/javascript" src="{% static 'js/crossfilter.js' %}"></script> 
    <script type="text/javascript" src="{% static 'js/dc.js' %}"></script> 
    <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script> 

    <script type="text/javascript"> 

    var chart = dc.pieChart("#test"); 
    var spenderRowChart = dc.rowChart("#test1"); 

    d3.csv("{% static 'sampledata/pramod.csv' %}", function(error, experiments) { 

     experiments.forEach(function(x) { 
     x.Name = x.Name; 
     x.Party = x.Party; 
     x.Gender = x.Gender; 



     }); 

     var ndx = crossfilter(experiments), 

     GenderDimension = ndx.dimension(function(d) {return d.Gender;}); 
     spendPerName = GenderDimension.group(); 
     PartyDimension = ndx.dimension(function(d) {return d.Party;}); 
     PartyPerName= PartyDimension.group().reduceCount(); 


     // tooltips for row chart 
     var tip = d3.tip() 
      .attr('class', 'd3-tip') 
      .offset([-10, 0]) 
      .html(function (d) { return "<span style='color: #f0027f'>" + d.key + "</span> : " + numberFormat(d.value); }); 
     chart 
     .width(200) 
     .height(200) 
     .dimension(GenderDimension) 
     .group(spendPerName) 
     .innerRadius(50); 

     spenderRowChart 
     .width(350).height(900) 
     .dimension(PartyDimension) 
     .group(PartyPerName) 
     .label(function (d) { return d.key }) 
     .title(function (d) { return d.value }) 
     .ordering(function(d) { return -d.value }) 
     .elasticX(true); 

     chart.render(); 
     spenderRowChart.render(); 

     d3.selectAll("#test1").call(tip); 
      d3.selectAll("#test1").on('mouseover', tip.show) 
       .on('mouseout', tip.hide); 


    }); 

    </script> 
      </body> 
    {% endblock %}

來源

2014-04-05 pramod24

工具提示內置到dc.js上作爲圖表對象上的.title屬性。嘗試是這樣的圖表對象上：

.title(function(d) {return d.key + 
    " £" + currFormat(d3.round(d.value)) + 
    " (" + d3.round((d.value/d3.sum(siteqtysum.all(), 
    function(d){ return d.value;}))*100,1) +"%)";})

這將產生對一排，上面寫着例如一個提示'London £1234 37.3%' 您可以在標題中添加文字"\n"以在工具提示中獲得換行。

來源

2014-11-22 17:38:46 lbk3918

dc.js：工具提示不顯示

回答

相關問題