Question

我正在使用Dimensional Charting javascript库dc.js创建一个条形图，它基于d3和crossfilter。我是dc.js library.i的新手。我正在尝试使用csv文件显示条形图，但图表无法显示。请给我正确的解决方案。

<html>
<head>
<title>dc.js - Bar Chart Example</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/dc.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"  type="text/javascript"></script>
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/crossfilter.js"></script>
<script type="text/javascript" src="js/dc.js"></script>

</head>
 <body>
 <div id="volume-month-chart">
 <span>Days by Gain or Loss</span>
 <a class="reset" href="javascript:gainOrLossChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
 <span class="reset" style="display: none;">Current filter: <span class="filter"></span>     
 </div>
 <script type="text/javascript">
 var fluctuationChart = dc.barChart("#volume-month-chart");
 d3.csv("data/morley.csv", function (data)
 {

    var dateFormat = d3.time.format("%m/%d/%Y");
    var numberFormat = d3.format(".2f");

    data.forEach(function (d) {
           d.Expt = +d.Expt; // coerce to number
           d.Run = +d.Run;
       d.Speed = +d.Speed;
});
     var ndx = crossfilter(data);
     var all = ndx.groupAll();
   fluctuationChart.width(420)
        .height(180)
        .margins({top: 10, right: 50, bottom: 30, left: 40})
        .dimension(fluctuation)
        .group(fluctuationGroup)
        .elasticY(true)
        .centerBar(true)
    .gap(1) 
    .round(dc.round.floor)
        .alwaysUseRounding(true)
        .x(d3.scale.linear().domain([-25, 25]))
        .renderHorizontalGridLines(true)
    .filterPrinter(function (filters) 
        {
           var filter = filters[0], s = "";
           s += numberFormat(filter[0]) + "% -> " + numberFormat(filter[1]) + "%";
           return s;
        });
        fluctuationChart.xAxis().tickFormat(
        function (v) { return v + "%"; });
        fluctuationChart.yAxis().ticks(5);
      </script>

Answer 1

这看起来像是尝试在d3.csv的回调之外使用数据的常见问题 - 请注意，此函数会立即返回，然后在数据可用时，它会调用回调。

因此，在呈现图表时，它没有数据。尝试将图表初始化移动到回调中。

（用小提琴更容易验证这一点。; - ）

dc.js：条形图无法显示

1 个答案: