代码之家  ›  专栏  ›  技术社区  ›  Scott Miller

应用筛选器时,DC.js复合图表不更新

  •  2
  • Scott Miller  · 技术社区  · 12 年前

    我正在使用DC.js和crossfilter。我正在尝试使用复合图表来放置条形图和折线图。然而,当我对数据应用过滤器时,条和线不会更新。如果我将图表作为独立的条形图,它们会正确更新。

    这是图表财产

    复合图表

    var chartScorecardComposite = dc.compositeChart("#regionMarketChart")
            .width(1002)
            .height(300)
            .margins({top: 30, right: 50, bottom: 50, left: 40})
            .dimension(chartIssuedJobsCountDim)
            .yAxisLabel("Issued on Time %")
            .rightYAxisLabel("Jobs Issued")
            .shareTitle(false)
            .x(d3.time.scale().domain([minDate, maxDate]))
            .y(d3.scale.linear().domain([0, 120]))
            .xUnits(d3.time.months)
            .compose([
                dc.barChart(chartScorecardComposite)
                    .dimension(chartIssuedJobsCountDim)
                    .group(chartIssuedJobsCountGroup)
                    .valueAccessor(function (d) {
                        return d.value.jobCount;
                    })
                    .title(function(d) {
                        return (d.key.getMonth() + 1) + "/" + d.key.getFullYear()
                        + "\n# of Jobs: "
                        + d.value.jobCount;
                    })
                    .renderTitle(true)
                    .centerBar(true)
                    .gap(5)
                    .useRightYAxis(true)
                    .colors(["#79BAEC"]),
                dc.lineChart(chartScorecardComposite)
                    .dimension(chartIssuedJobsCountDim)
                    .group(chartIssuedOnTimeGroup)
                    .valueAccessor(function (d) {
                        return d.value.onTimePercent;
                    })
                    .title(function(d) {
                        return (d.key.getMonth() + 1) + "/" + d.key.getFullYear()
                        + "\n% of Jobs Issued on Time: "
                        + d.value.onTimePercent + "%";
                    })
                    .renderTitle(true)
                    .colors(["#808080"])
            ])
            .elasticY(true)
            .renderHorizontalGridLines(true)
            .brushOn(false)
            .renderlet(function (chart) { // Rotate the x-axis labels 45 degrees
                chart.selectAll("g.x text")
                  .attr('dx', '-25')
                  .attr('dy', '7')
                  .attr('transform', "rotate(-45)");
            })
            .xAxis().ticks(d3.time.months).tickFormat(function(d) {
                return (d.getMonth() + 1) + "/" + d.getFullYear()
            })
    

    条形图(在呈现compositeChart时注释掉)

    var issuedJobsBarChart = dc.barChart("#regionMarketChart")
            .yAxisLabel("Jobs Issued")
            .dimension(chartIssuedJobsCountDim)
            .group(chartIssuedJobsCountGroup)
            .valueAccessor(function (d) {
                return d.value.jobCount;
            })
            .title(function(d) {
                return (d.key.getMonth() + 1) + "/" + d.key.getFullYear()
                + "\n# of Jobs: "
                + d.value.jobCount;
            })
            .renderTitle(true)
            .elasticY(true)
            .elasticX(true)
            .centerBar(true)
            .gap(5)
            .brushOn(false)
            .x(d3.time.scale().domain([minDate, maxDate]))
            .xUnits(d3.time.months)
            .xAxis().tickFormat(function(d) {
                return (d.getMonth() + 1) + "/" + d.getFullYear()
            })
    

    折线图(渲染compositeChart时注释掉)

    var issuedOnTimeLineChart = dc.lineChart(chartScorecardComposite)
            .width(800)
            .height(250)
            .margins({top: 30, right: 25, bottom: 50, left: 40})
            .yAxisLabel("Issued on Time %")
            .renderHorizontalGridLines(true)
            .renderVerticalGridLines(true)
            .dimension(chartIssuedJobsCountDim)
            .group(chartIssuedOnTimeGroup)
            .valueAccessor(function (d) {
                return d.value.onTimePercent;
            })
            .brushOn(false)
            .y(d3.scale.linear().domain([0, 120]))
            .x(d3.time.scale().domain([minDate, maxDate]))
            .xUnits(d3.time.months)
            .xAxis().ticks(d3.time.months).tickFormat(function(d) {
                return (d.getMonth() + 1) + "/" + d.getFullYear()
            })
    

    谢谢你的帮助

    2 回复  |  直到 12 年前
        1
  •  2
  •   Scott Miller    12 年前

    在玩了一些代码之后,我能够通过分别定义折线图和条形图,然后在组合图的compose方法中调用它们来实现这一点。

    var issuedOnTimeLineChart = dc.lineChart(chartScorecardComposite)
            .dimension(chartIssuedJobsCountDim)
            .group(chartIssuedOnTimeGroup)
            .valueAccessor(function (d) {
                return d.value.onTimePercent;
            })
            .colors(["#808080"])
            .brushOn(false)
            .y(d3.scale.linear().domain([0, 120]))
            .x(d3.time.scale().domain([minDate, maxDate]))
    
        var issuedJobsBarChart = dc.barChart(chartScorecardComposite)
            .dimension(chartIssuedJobsCountDim)
            .group(chartIssuedJobsCountGroup)
            .valueAccessor(function (d) {
                return d.value.jobCount;
            })
            .title(function(d) {
                return (d.key.getMonth() + 1) + "/" + d.key.getFullYear()
                + "\n# of Jobs: "
                + d.value.jobCount;
            })
            .renderTitle(true)
            .centerBar(true)
            .gap(5)
            .colors(["#79BAEC"])
            .brushOn(false)
            .useRightYAxis(true)
            .x(d3.time.scale().domain([minDate, maxDate]))
            .xUnits(d3.time.months)
    
    
        //Define the composite chart
        var chartScorecardComposite = dc.compositeChart("#regionMarketChart")
            .width(1002)
            .height(300)
            .margins({top: 30, right: 50, bottom: 50, left: 40})
            .dimension(chartIssuedJobsCountDim)
            .yAxisLabel("Issued on Time %")
            .rightYAxisLabel("Jobs Issued")
            .shareTitle(false)
            .x(d3.time.scale().domain([minDate, maxDate]))
            .y(d3.scale.linear().domain([0, 120]))
            .xUnits(d3.time.months)
            .compose([
                issuedJobsBarChart,
                issuedOnTimeLineChart
            ])
            .elasticY(true)
            .renderHorizontalGridLines(true)
            .brushOn(false)
            .renderlet(function (chart) { // Rotate the x-axis labels 45 degrees
                chart.selectAll("g.x text")
                  .attr('dx', '-25')
                  .attr('dy', '7')
                  .attr('transform', "rotate(-45)");
            })
            .xAxis().ticks(d3.time.months).tickFormat(function(d) {
                return (d.getMonth() + 1) + "/" + d.getFullYear()
            })
    

    这允许应用于维度的任何过滤器正确渲染和更新

        2
  •  0
  •   Doug Mair    11 年前

    我看到了同样的结果。

    我认为,当它们第一次被声明时,这是有效的,因为chartScorerecomposite的值没有在闭包中设置。