Question

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

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

Answer 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"，以便在工具提示中获取换行符。

dc.js：不显示工具提示

1 个答案: