Question

我正在使用Dimensional Charting javascript库dc.js制作堆积的条形图，该库基于d3和crossfilter。我是dc.js library.i中的新手。我正在使用csv文件显示堆积条形图。我有三个图表

1）geoChoroplethChart

2）条形图

3）stackedbarchart。

我想在geoChoroplethChart中选择状态，然后只在条形图中选择状态显示，但不能在堆积的barcharts中显示。我正在尝试下面的代码和附加图像。

代码： -

    <script type="text/javascript">

        var numberFormat = d3.format(".2f");
        var stackedbarchart = dc.barChart("#chart");
        var usChart = dc.geoChoroplethChart("#us-chart");

        var barchart= dc.barChart("#chart-row-Population_Density");




         d3.csv("{% static 'sampledata/healthdata1.csv' %}", function(error, csv) {

              function resize() {
        // adjust things when the window size changes
        width = parseInt(d3.select('#us-chart').style('width'));
        width = width - margin.left - margin.right;
        height = width * mapRatio;

        // update projection
        projection
            .translate([width / 2, height / 2])
            .scale(width);

        // resize the map container
        usChart
                .width(width)
                .height(height);

        // resize the map
        usChart.selectAll('.state').attr('d', path);
      }




            var data = crossfilter(csv);
            var all = data.groupAll();

             var barTip = d3.tip()
            .attr('class', 'd3-tip')
            .offset([-10, 0])
            .html(function (d) {
                return "<span style='color: #f0027f'>" + d.data.key + "</span> : " + d.y.toFixed(0);
            });

              var tip = d3.tip()
            .attr('class', 'd3-tip')
            .offset([-10, 0])
            .html(function (d) {
                return "<span style='color: #f0027f'>" + d.key + "</span> : " + d.value.toFixed(0);
            });


            var margin = {top: 10, left: 10, bottom: 10, right: 10}
            , width = parseInt(d3.select('#us-chart').style('width'))
            , width = width - margin.left - margin.right
            , mapRatio = .6
            , height = width * mapRatio;

        var projection = d3.geo.albersUsa()
            .scale(width)
            .translate([width / 2, height / 2]);

        var path = d3.geo.path()
        .projection(projection);

        d3.select(window).on('resize', resize);





            var states = data.dimension(function (d) {
                return d["State_Id"];
            });



            var stateRaisedSum = states.group().reduceSum(function (d) {
                return d["Population"];
            });



        var stateDim=data.dimension(function (d){
            return d["State_Id"];
        });

         var Population_tot= stateDim.group().reduceSum(function (d){
            return  d["Population"];
        });




            var eventsByDate = states.group().reduce(
                function (p, v) {
                     //++p.Count;
                    p.Age_19_Under += +v["Age_19_Under"];
                    p.Age_19_64 += +v["Age_19_64"];
                    p.Age_65_84 += +v["Age_65_84"];
                    p.Age_85_and_Over += +v["Age_85_and_Over"];
                    return p;
                },
                function (p, v) {
                      //--p.Count;
                    p.Age_19_Under -= -v["Age_19_Under"];
                    p.Age_19_64 -= -v["Age_19_64"];
                    p.Age_65_84 -=  -v["Age_65_84"];
                    p.Age_85_and_Over -= -v["Age_85_and_Over"];
                    return p;
                },
                function () {
                    return {
                        // Count: 0,
                        Age_19_Under: 0,
                        Age_19_64: 0,
                        Age_65_84: 0,
                        Age_85_and_Over:0
                    };
                }
        );

           var colorRenderlet = function (chart) {
            chart.selectAll("rect.bar")
                    .on("click", function (d) {
                        function setAttr(selection, keyName) {
                            selection.style("fill", function (d) {
                                if (d[keyName] == "Age_19_Under") return "#63D3FF";
                                else if (d[keyName] == "Age_19_64") return "#FF548F";
                                else if (d[keyName] == "Age_65_84") return "#9061C2";
                                else if (d[keyName] == "Age_85_and_Over") return "#00FF00";
                            });
                        }
                        setAttr(_chart.selectAll("g.stack").selectAll("rect.bar"), "layer");
                        setAttr(_chart.selectAll("g.dc-legend-item").selectAll("rect"), "name")
                    });
        };


          d3.json("{% static 'sampledata/us-states.json' %}", function(error, statesJson) {
                usChart .width(width)
                        .height(height)
                        .projection(projection)
                        .dimension(states)
                        .group(stateRaisedSum)
                        .colors(d3.scale.quantize().range(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF", "#0061B5"]))
                        .colorDomain([0, 200])
                        .colorCalculator(function (d) { return d ? usChart.colors()(d) : '#ccc'; })
                        .overlayGeoJson(statesJson.features, "state", function (d) {
                            return d.properties.name;
                        })
                        .title(function (d) {
                            return "State: " + d.key + "\nTotal Population: " + d.value;
                        });



              barchart.width(860)
                .height(350)
                .margins({ top: 10, left: 50, right: 10, bottom: 80 })
                .transitionDuration(750)
                .xAxisLabel('States of US')
                .yAxisLabel('Population')
                .dimension(stateDim)
                .group(Population_tot)
                .centerBar(false)
                .brushOn(false)
                .title(function (d) {
                    ""
                })
                .gap(5)
                .elasticY(true)
                .colors(['#00FF00'])
                .xUnits(dc.units.ordinal)
                .x(d3.scale.ordinal())
                .y(d3.scale.linear().domain([0, 600]))
                .renderHorizontalGridLines(false)
                .yAxis().tickFormat(d3.format("s"));

         barchart.renderlet(function (chart) {
            chart.selectAll("g.x text").attr('dx', '-20').attr('dy', '+7').attr('transform', "rotate(-60)");
        });




         stackedbarchart
                .margins({top: 50, right: 20, left: 80, bottom: 50})
                .width(860)
                .height(350)
                .transitionDuration(750)
                .gap(5)
                .dimension(stateDim)//stateDim//states
                .group(eventsByDate,"Age(Under-19)")
                .valueAccessor(function (d) {
                    return d.value.Age_19_Under;
                })
                .stack(eventsByDate, "Age(19-64)", function (d) {
                    return d.value.Age_19_64;
                })
                .stack(eventsByDate, "Age(65-84)", function (d) {
                    return d.value.Age_65_84;
                })
                .stack(eventsByDate, "Age(85-Over)", function (d) {
                    return d.value.Age_85_and_Over;
                })


                .xUnits(dc.units.ordinal)
                .x(d3.scale.ordinal())
                .y(d3.scale.linear().domain([0,600 ]))
                .centerBar(false)
                .elasticY(true)
                .brushOn(false)
                .renderlet(colorRenderlet)
                //.renderHorizontalGridLines(false)
                //.yAxis().tickFormat(d3.format("s"))
                .legend(dc.legend().x(700).y(0).itemHeight(13).gap(5))
                .yAxis().tickFormat(d3.format("s"));




            stackedbarchart.renderlet(function (chart) {
            chart.selectAll("g.x text").attr('dx', '-20').attr('dy', '-3').attr('transform', "rotate(-90)");
        });










                dc.renderAll();
               d3.selectAll(".bar").call(barTip);
                    d3.selectAll(".bar").on('mouseover', barTip.show)
                        .on('mouseout', barTip.hide);

              d3.selectAll("g.row").call(tip);
                    d3.selectAll("g.row").on('mouseover', tip.show)
                        .on('mouseout', tip.hide);

            });




        });
    </script>

enter image description here

我的csv跟随foramt：

 State_Name,State_Id,County_Name,Population,Population_Density,Poverty,Age_19_Under,Age_19_64,Age_65_84,Age_85_and_Over
Alabama,AL,Autauga,48612,82,10.4,13076,30285,4763,437
Alabama,AL,Baldwin,162586,102,10.2,38207,98039,23574,2926
Alabama,AL,Barbour,28414,32,22.1,7643,17701,2784,255
Alabama,AL,Bibb,21516,35,16.8,5056,12974,3119,387
Alabama,AL,Blount,55725,86,11.9,14990,34716,5461,501
Alabama,AL,Bullock,11055,18,26.2,2597,6666,1602,198
Alabama,AL,Butler,20766,27,20,5586,12937,2035,186
Alabama,AL,Calhoun,112141,184,16.4,26353,67621,16260,2018
Alabama,AL,Chambers,35460,59,16.2,9538,22091,3475,319
Alabama,AL,Cherokee,24522,44,15.2,5762,14786,3555,441

Answer 1

您的问题并不完全清楚，但我认为您可能会遇到“重复使用维度”问题，因为您在两个不同的图表中使用相同的维度。

我刚刚创建了一个常见问题解答：

https://github.com/dc-js/dc.js/wiki/FAQ#do-two-charts-on-the-same-dimension-not-filter-each-other

如何显示选定的stckedbarchart？

1 个答案: