dc.js：工具提示不显示答案

【问题标题】：dc.js: Tooltip does not displaydc.js：工具提示不显示
【发布时间】：2014-04-05 09:43:32
【问题描述】：

我正在使用基于 d3 和 crossfilter 的 Dimensional Charting javascript 库 dc.js 制作图表。我是 dc.js 库的新手。我正在尝试使用适用于 python 的 django 框架显示图形。我正在尝试显示样式工具提示但无法显示。我正在尝试以下代码。

       {% 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 %}

【问题讨论】：

标签： javascript django d3.js dc.js

【解决方案1】：

工具提示作为图表对象的 .title 属性内置于 dc.js。在图表对象上尝试这样的操作：

.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" 以在工具提示中获得换行符。

【讨论】：