个人中心
gpt4 book ai didi

javascript - dc.js/如何在持续时间后自动更改条形图选定的值？

转载 作者：行者123 更新时间：2023-12-03 07:16:17 24 4
gpt4 key购买 nike

我有一个包含 3 个图表的仪表板:一个条形图和 2 个饼图。饼图是“月”和“年”。条形图显示前 10 条数据。因此，如果我单击特定的月份和年份，条形图将更新以反射(reflect)前 10 个值(其计数在 y 轴上)。我希望能够从选择的选项中观看条形图更新(一段时间后)。

例如，我想查看 2015 年 1 月前 10 名...然后 2015 年 2 月前 10 名...然后 2015 年 3 月前 10 名...等等。我希望能够在不单击图表的情况下执行此操作。我只是想坐下来看视频。

我该怎么做？

这是带有一些示例数据的代码:

var data = [
          {"name": "apple", "count": 2, "month": "January", "Yr": "2015", "MYr": "Y2015_M01"},
          {"name": "apple", "count": 3, "month": "February", "Yr": "2015", "MYr": "Y2015_M02"},
          {"name": "apple", "count": 6, "month": "July", "Yr": "2015", "MYr": "Y2015_M07"},
          {"name": "apple", "count": 1, "month": "September", "Yr": "2015", "MYr": "Y2015_M09"},
          {"name": "bread", "count": 1, "month": "January", "Yr": "2015", "MYr": "Y2015_M01"},
          {"name": "bread", "count": 1, "month": "March", "Yr": "2015", "MYr": "Y2015_M03"},
          {"name": "bread", "count": 2, "month": "December", "Yr": "2015", "MYr": "Y2015_M12"},
            {"name": "orange", "count": 12, "month": "January", "Yr": "2015", "MYr": "Y2015_M01"}
];

var ndx = crossfilter(data);  // all data

// bar graph:
var bar = dc.barChart("#bar_name");
var barDim = ndx.dimension(function(d) {return d.name;});
var barGroup = barDim.group().reduceCount(function(d) {return +d.MYr;});
var group = barGroup;
var filteredGroup = (function (source_group) {return {
    all:function () {
        return source_group.top(11).filter(function(d) {
            return d.key != "No value given";
             });
          }
    };})(group);
bar.width(750).height(300)
   .dimension(barDim)
   .group(filteredGroup)
   .renderHorizontalGridLines(true)
   .gap(2)
   .x(d3.scale.ordinal())
   .xUnits(dc.units.ordinal)
   .elasticY(true)
   .elasticX(true)
   .yAxisLabel("count")
   .margins({top:10, left:60, right:10, bottom:130});
bar.on("renderlet",function(_chart){
            _chart.selectAll("g.x text").style("text-anchor","end")
                  .attr('dx', '25').attr('dy', '12');
});

// Month pie chart:
var pieMonth = dc.pieChart("#pie_month");
var pieMonthDim = ndx.dimension(function(d) {return d.month;});
var pieMonthGroup = pieMonthDim.group().reduceSum(function(d) {return +d.count;});
pieMonth.width(200).height(200)
        .dimension(pieMonthDim)
        .group(pieMonthGroup)
        .renderLabel(true)
        .cy(80)
        .externalRadiusPadding(20)
        .innerRadius(0);

// Year pie chart:
var pieYear = dc.pieChart("#pie_Year");
var pieYearDim = ndx.dimension(function(d) {return d.Yr;});
var pieYearGroup = pieYearDim.group().reduceSum(function(d) {return +d.count;});
pieYear.width(300).height(200)
       .dimension(pieYearDim)
       .group(pieYearGroup)
       .legend(dc.legend().x(15).y(15).horizontal(0).itemHeight(13).gap(6).legendWidth(100).itemWidth(100))
       .renderLabel(false)
       .cy(80)
       .cx(200)
       .externalRadiusPadding(20)
       .innerRadius(0);


dc.renderAll();  // render graphs
<link href="https://github.com/dc-js/dc.js/blob/develop/dc.css" rel="stylesheet"/>

<script src="https://github.com/square/crossfilter/blob/master/crossfilter.js"></script>

<script src="https://github.com/crossfilter/reductio/blob/master/reductio.js"></script>
<script src="https://github.com/dc-js/dc.js"></script>
<head>
  <style>
            #bar_name {
            margin-top:  0em; margin-bottom: 1em;
            margin-left: 0.5em; margin-right:  2em;
        }
        #pie_month {
            margin-top:  0em; margin-bottom: 1em;
            margin-left: 1em; margin-right:  2em;
        }
        #pie_Year {
            margin-top:  0em; margin-bottom: 1em;
            margin-left: 0em; margin-right:  2em;
        }
  </style>
    <div id="bar_name"><h3><center>Top 10 (total)</center></h3></div>
    <div id="pie_month"><h3><center>Month</center></h3></div>
    <div id="pie_Year"><h3><center>Year</center></h3></div>
</head>
<body>
      <style>
        body {
            padding: 10px;
        }
    </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.min.js" type="javascript"></script>
</body>

这是包含示例数据的仪表板图像: dashboard with sample data

我使用源脚本 dc.css、crossfilter.js、reductio.min.js、d3.v3.js 和 dc.js。我无法让代码片段工作。我相信这与外部文件的拉取有关。

最佳答案

我将数据分解为我想要的部分，添加了一个重置​​数据的函数，然后为每组数据创建了 setTimeout 函数。

function resetData(ndx, dimensions) {
    var barFilters = bar.filters();
    var yearChartFilters = pieYear.filters();
    var monthChartFilters = pieMonth.filters();
    bar.filters(null);
    pieYear.filter(null);
    pieMonth.filters(null);
    ndx.remove();
    bar.filter([barFilters]);
    pieYear.filter([yearChartFilters]);
    pieMonth.filter([monthChartFilters]);
}

setTimeout(function() {
    resetData(ndx, [barDim, pieMonthDim, pieYearDim]);
    ndx.add(data2);
    dc.redrawAll();
}, 5000);  // 5 sec delay from rendering page

setTimeout(function() {
    resetData(ndx, [barDim, pieMonthDim, pieYearDim]);
    ndx.add(data3);
    dc.redrawAll();
}, 15000);  // 10 sec after change (15 after rendering page)

关于javascript - dc.js/如何在持续时间后自动更改条形图选定的值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36408931/

24 4 0
文章推荐： javascript - jQuery.getJSON() 在页面加载时不起作用。在点击事件中工作正常
文章推荐： javascript - 如何获取多维数组中最长的单词？
文章推荐： javascript - 如何从数组中提取数字序列？
文章推荐： javascript - 获取和设置 localStorage 数组中的对象值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com