dc.js X轴序图问题问题、dc、js、轴序图

由网友(20___丶奔小康)分享简介：我想提请使用crossfilter，dc.js和角直流简单的柱状图。该饼图工作正常。该柱状图不会呈现酒吧。在Chrome中，如果我检查，我看到的值出现。如果我强迫焦点，我也看到了图表。我已经尝试了所有的建议，但它似乎有3个问题：酒吧已开始在0 的宽度为1像素酒吧没有呈现在屏幕上任何指针？下面是code： \r\r ＆L...

我想提请使用crossfilter，dc.js和角直流简单的柱状图。该饼图工作正常。该柱状图不会呈现酒吧。在Chrome中，如果我检查，我看到的值出现。如果我强迫焦点，我也看到了图表。我已经尝试了所有的建议，但它似乎有3个问题：

酒吧已开始在0 的宽度为1像素酒吧没有呈现在屏幕上

任何指针？

下面是code：

＆LT;！DOCTYPE HTML＆GT;r＆LT; HTML LANG =ENGT＆;r＆LT; HEAD＆GT;r    ＆LT;标题＆GT; dc.js  - 饼图例＆LT; /标题＆GT;r    ＆LT;间的charset =UTF-8＆GT;r    ＆LT;链接rel =stylesheet属性类型=文/ CSS的href =公共/ lib目录/ dcjs / WEB / CSS / dc.css/＆GT;r    ＆LT;脚本类型=文/ JavaScript的SRC =// cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>r    ＆LT;脚本类型=文/ JavaScript的SRC =公共/ lib目录/ D3 / d3.js＆GT;＆LT; / SCRIPT＆GT;r    ＆LT;脚本类型=文/ JavaScript的SRC =公共/ lib目录/ crossfilter / crossfilter.js＆GT;＆LT; / SCRIPT＆GT;r    ＆LT;脚本类型=文/ JavaScript的SRC =公共/ lib目录/ dcjs / dc.js＆GT;＆LT; / SCRIPT＆GT;r    ＆LT;脚本类型=文/ JavaScript的SRC =公共/ lib目录/角/ angular.js＆GT;＆LT; / SCRIPT＆GT;r    ＆LT;脚本类型=文/ JavaScript的SRC =公共/ lib目录/角DC /距离/角dc.js＆GT;＆LT; / SCRIPT＆GT;r＆LT; /头＆GT;r＆LT;机身NG-应用=应用程序＆GT;r＆LT;！ - 我们很好地分开视图和数据。这里，关于这样的所有信息，以显示数据r是在模板 - ＆GT;r＆LT; DIV NG控制器=myController的＆GT;r    ＆LT; DIV DC-图=饼图r         直流图表基团=1r         直流宽=780r         DC-HEIGHT =480r         直流内半径=100r         DC-尺寸=果r         DC-组=fruitSalesr         DC-传奇=dc.legend（）＆GT;r    ＆LT; / DIV＆GT;r    ＆LT; DIV DC-图=柱状图r         直流宽=780r         DC-HEIGHT =480r         DC-尺寸=果r         DC-组=fruitSalesr         DC-X =d3.scale.ordinal（）。域（[''，'苹果'，'香蕉']）r         直流xUnits =直流单元-序r         直流弹性-γ=真r         DC-中心吧=真r         直流间隙=1r         DC-BAR-填充=0.5r         直流xAxisPadding =50r         DC-传奇=dc.legend（）＆GT;r    ＆LT; / DIV＆GT;r    ＆LT; / DIV＆GT;r＆LT; / DIV＆GT;r＆LT;脚本类型=文/ JavaScript的＆GT;r    angular.module（应用程序，[angularDc]）;r    = myController的功能（$范围）{r            VAR fruitCf = crossfilter（[r                {名称：'苹果'，销售：40}，r                {名称：'苹果'，销售：40}，r                {名称：'香蕉'，销售：20}]）;r            $ scope.fruit = fruitCf.dimension（功能（D）{返回d.Name;}）;r            $ scope.fruitSales = $ scope.fruit.group（）reduceSum（函数（D）{返回d.Sales;}）;r            // $范围。$适用（）r        };r＆LT; / SCRIPT＆GT;r＆LT; /身体GT;r＆LT; / HTML＆GT;

rrr

解决方案

我无法找到一个解决这个问题，但直流集成的另一种方式和角度，我们所做的就是通过角度范围，把数据反馈给crossfilter和code中的图表我们在DC通常做的，并通过调用的div设置它们的HTML。使用这种方法，我们没有注意到任何性能降级。

I am trying to draw a simple bar chart using crossfilter, dc.js and angular-dc. The piechart works fine. The barchart does not render the bars. In Chrome, if I inspect, I see the values are there. and if I force focus, I do see the charts. I have tried all the suggestions but it seems that there are 3 issues:

Bars are starting at 0 The width is 1 px Bars are not rendering on the screen

Any pointers?

Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>dc.js - Pie Chart Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="public/lib/dcjs/web/css/dc.css"/>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    <script type="text/javascript" src="public/lib/d3/d3.js"></script>
    <script type="text/javascript" src="public/lib/crossfilter/crossfilter.js"></script>
    <script type="text/javascript" src="public/lib/dcjs/dc.js"></script>
    <script type="text/javascript" src="public/lib/angular/angular.js"></script>
    <script type="text/javascript" src="public/lib/angular-dc/dist/angular-dc.js"></script>
</head>
<body ng-app="app">
<!-- we nicely separate the view and the data. Here, all information concerning the way to display the data
is in the template -->
<div ng-controller="myController">
    <div dc-chart="pieChart"
         dc-chart-group="1"
         dc-width="780"
         dc-height="480"
         dc-inner-radius="100"
         dc-dimension="fruit"
         dc-group="fruitSales"
         dc-legend="dc.legend()">
    </div>
    <div dc-chart="barChart"
         dc-width="780"
         dc-height="480"
         dc-dimension="fruit"
         dc-group="fruitSales"
         dc-x="d3.scale.ordinal().domain(['','Apple','Banana'])"
         dc-xUnits ="dc-units-ordinal"
         dc-elastic-y="true"
         dc-center-bar="true"
         dc-gap="1"
         dc-bar-padding="0.5"
         dc-xAxisPadding="50"
         dc-legend="dc.legend()">
    </div>
    </div>
</div>
<script type="text/javascript">
    angular.module("app", ["angularDc"]);
    myController = function($scope) {
            var fruitCf =  crossfilter([
                {Name: 'Apple', Sales: 40},
                {Name: 'Apple', Sales: 40},
                {Name: 'Banana', Sales: 20}]);
            $scope.fruit  = fruitCf.dimension(function(d) {return d.Name;});
            $scope.fruitSales = $scope.fruit.group().reduceSum(function(d) {return d.Sales;});
            //$scope.$apply()
        };
</script>
</body>
</html>

解决方案

I could not find a solution to this problem But another way of integrating the dc and angular which we did was to feed data to the crossfilter via the angular scope and code the charts as we do normally in dc and set them up in the html by calling divs. We did not notice any performance downgrade using this method.

阅读全文

相关专题：问题；DC ；JS ；轴序图；发布时间：2023-09-13 05:26:21