Question

*已更新相关代码。 *再次更新：删除图表分组会导致以下错误：“无法获得未定义或空引用dc.js（5575,9）的属性'分类'”。我正在使用DC 3.0.11。

我遇到一个问题，即单击图表上的某个选择时，我的DC图表无法互相过滤。如果我调用一个函数显式地执行此操作，则确实可以，但是我想避免这种情况。

这是我的一般做法：

我确实包含了dc.css（如果重要的话）
我的交叉过滤器ndx和尺寸正确

我在renderlet上没有定义图表（这是原因吗？）

        var masterData = [];





$(document).ready(function () { //UPDATED CODE START


var siteurl = 'site';
var ItemCount= GetItemCount(siteurl, 'list');
createRestUrl(siteurl,ItemCount,'list');

});  // UPDATED CODE END



function GetItemCount(siteurl, ListName){
var ItemCount='';
$.ajax({
    url: siteurl+"/_api/web/lists/GetByTitle('"+ListName+"')/ItemCount", 
    method: "GET",
    async: false,
    headers: { "Accept": "application/json; odata=verbose" },
    success: function (data) {
        ItemCount = data.d.ItemCount;
    },
    error: function (data) {
        console.log(data);
    }
});
return ItemCount;   

}   // GetItemCount END


function createRestUrl(siteurl, ItemCount, ListName) {


    var listServiceUrl = siteurl+ "/_api/web/lists/GetByTitle('" + ListName + "')/Items";


//Rest call to process each items of list
    $.when(processList(listServiceUrl,ItemCount)).done(function () { 

console.log("FINISHED");
console.log("--------");
console.log(masterData);

    var ndx = crossfilter(masterData),
        clientMgr = ndx.dimension(function(d) { return d.clientMgr}),                        
        otherTeammates = ndx.dimension(function(d) { return d.otherTeammates}),
        topic = ndx.dimension(function(d) { return d.topic}),
        status = ndx.dimension(function(d) { return d.status}),
        team = ndx.dimension(function(d) { return d.team}),
        requester = ndx.dimension(function(d) { return d.requester}),
        requesterBusiness = ndx.dimension(function(d) { return d.requesterBusiness}),
        submitted = ndx.dimension(function(d) { return d.submitted}),
        clientMgrGroup = clientMgr.group(),
        otherTeammatesGroup = otherTeammates.group(),
        topicGroup = topic.group(),
        statusGroup = status.group(),
        teamGroup = team.group(),
        requesterGroup = requester.group(),
        requesterBusinessGroup = requesterBusiness.group(),
        submittedGroup = submitted.group();

        var teamChart = dc.rowChart("#team_chart", "team");
        var clientMgrChart = dc.pieChart("#mgr_chart", "mgr");
        var statusChart = dc.pieChart("#status_chart", "status");
        var requesterChart = dc.rowChart("#requester_chart", "request");
        var requesterBusinessChart = dc.pieChart("#requesterBusiness_chart", "requestBusiness");
        var timeSelect = dc.lineChart("#time_chart", "time");
        var topicChart = dc.pieChart("#topic_chart", "topic");
        var teamNum = dc.numberDisplay("#teamNum", "teamNum");

        Date.prototype.addDays = function(days) {
        var dat = new Date(this.valueOf());
        dat.setDate(dat.getDate() + days);
        return dat;
        }

        var thisDay = new Date();
        var todayMinSix = thisDay.addDays(-30);
        var todayPlusSix = thisDay.addDays(30);

        teamChart
        .dimension(team)
        .group(teamGroup)
        .width(800)
        .height(200)
        .transitionDuration(3000)
        .ordering(function(d) { return -d.value })
            .elasticX(true)
            .x(d3.scaleLinear().domain([0, 100]))
        .colors('#58D3F7')

        //teamNum
        //.valueAccessor(function(d) { return d})
        //.formatNumber(d3.format())
        //.group(teamGroup)

        clientMgrChart
        .dimension(clientMgr)
        .group(clientMgrGroup)
        .width(300)
        .height(300)
        .transitionDuration(3000)

            statusChart
        .dimension(status)
        .group(statusGroup)
        .height(200)
        .width(500)
        .innerRadius(95)
        .transitionDuration(3000)
        .colors(d3.scaleOrdinal().domain(["02 - Work-In-Progress", "01 - Pending Initial Review"])
                       .range(['#58D3F7', '#2E9AFE']))

        requesterChart
            .dimension(requester)
            .group(requesterGroup)
            .height(200)
            .width(800)
            .gap(10)
        .transitionDuration(3000)
            .ordering(function(d) { return -d.value })
            .elasticX(true)
        .colors('#F78181')
            .x(d3.scaleLinear().domain([0, 100]));

        requesterBusinessChart
        .dimension(requesterBusiness)
        .group(requesterBusinessGroup)
        .height(300)
        .width(300)
        .innerRadius(117)
        .transitionDuration(3000)
        .colors('#F78181')

        topicChart
        .dimension(topic)
        .group(topicGroup)
        .height(200)
        .width(500)
        .innerRadius(95)
        .transitionDuration(3000)
        .colors(d3.scaleOrdinal().domain(["New Report / Interface", "General Support", "One-Time Data Set", "Recurring Data Set", "Modify Existing Report / Interface", "Production Issue"])
                       .range(['#F5A9A9', '#F78181', '#FA5858', '#F6CECE', '#F8E0E0', "#FBEFEF"]))

        timeSelect
        .width(1700)
            .height(150)
            .dimension(submitted)
            .group(submittedGroup)
            .transitionDuration(1000)
            .elasticY(true)
            .renderArea(true)
            .x(d3.scaleTime().domain([todayMinSix, thisDay]))
            .xUnits(d3.timeDays)
            .mouseZoomable(false)
            .xAxis();

        teamChart.render(); 
        statusChart.render();
        requesterChart.render();
        topicChart.render();


});
}

//Step 3: Rest call to process each items of list
function processList(nextUrl,ItemCount) {

    var dfd = new $.Deferred();

    if (nextUrl == undefined) {
        dfd.resolve();
        return;
    }

getJSONDataFromUrl(nextUrl).done(function (listItems) {

        TotalItemCount = TotalItemCount+listItems.d.results.length;
        console.log("getJSON called");
        var items = listItems.d.results;
            var next = listItems.d.__next;

            $.when(processList(next,ItemCount)).done(function (){
            dfd.resolve();
            });

    $.each(items, function(index, obj){
        items = {};
        items.clientMgr = obj.ClientMgr;                         //Assigned To - might not be the right field
        items.otherTeammates = obj.OtherTeammatesEngaged;        //Assigned To - might not be the right field
        items.topic = obj.Topic;
        items.status = obj.Status;
        items.team = obj.Team; 
        items.requester = obj.RequesterLOB;
        items.submitted = obj.Submitted;
        items.requesterBusiness = obj.RequesterBusinessGroup;
        console.log("looping through each");

        var convert = new Date(items.submitted);
        items.submittedConvert = moment(convert).format('L');
        items.submitted = convert;  

        var assignName = items.clientMgr;
        items.clientMgr = assignName;       

        masterData.push(items);
        console.log(items.requesterBusiness);
        console.log(items.status);
    });  //.each END



}); // getJSONDataFromUrl END

return dfd.promise();

}   // processList END

我很早以前就开始进行这项工作，但是随着项目变得越来越复杂，整个过程中出现了一些问题。

Answer 1

对其他人的注意：对于dc.js 3.1.2，单击时我的单个rowCharts不会设置动画。交叉过滤器中的其他图表都进行了动画处理。

非常困惑，一直跟踪到dc.js调用堆栈，并学到了很多东西。

最终，导致失败的根本原因是页面的HTML中没有链接dc.css。

您没有正确链接dc.css的另一个好方法是，不显示rowChart垂直线。

屏幕截图

带有CSS的行图表-单击任何条都可以触发动画。

不带CSS的行图-单击任何条都不会触发动画。

Answer 2

我将猜测错误是指使用.classed()（距5575几行）。这是导致5575的几行：

    if (d3.sum(_chart.data(), _chart.cappedValueAccessor)) {
        pieData = pie(_chart.data());
        _g.classed(_emptyCssClass, false);
    } else {
        // otherwise we'd be getting NaNs, so override
        // note: abuse others for its ignoring the value accessor
        pieData = pie([{key: _emptyTitle, value: 1, others: [_emptyTitle]}]);
        _g.classed(_emptyCssClass, true);
    }

if (_g) {

https://github.com/dc-js/dc.js/blob/3.0.11/dc.js#L5565-L5575

因此（除了行号稍微有些偏离外），可以很好地猜测_g为空。

正如我在上面的评论中指出的那样，这可能表明图表在呈现之前已重新绘制。如果创建图表但不渲染，则会发生这种情况。渲染会初始化诸如比例尺之类的东西，以及诸如保存图表的<g>之类的父元素。

创建统计图时，可以指定统计图组或为您选择默认统计图组。该图表在该组中注册，并且当该组中的任何图表被过滤时，所有图表都将重新绘制。

在上面的代码中，您呈现了特定的图表（其中有4个），但是还有更多图表需要初始化但不呈现（8个）。特别是，除了clientMgrChart以外的所有饼图都被呈现。以后单击图表时，图表可能会在尝试重绘时崩溃。

应该是nice if dc.js implemented a more helpful error for this case，因为您当前必须猜测“嗯，为空，猜测某些设置不正确”，并且知道渲染必须在重绘之前进行。

注意：初始化图表然后调用

更为健壮

dc.renderAll();

而不是手动呈现每个人。

DC JS图表，点击时交叉过滤器未过滤

2 个答案: