Clustergrammer 获得矩形的负值答案

【问题标题】：Clustergrammer getting negative values for rectsClustergrammer 获得矩形的负值
【发布时间】：2017-06-20 14:37:43
【问题描述】：

我正在尝试使用此处开发的 Clusergrammer JS 提取和示例 clustergrammer：http://clustergrammer.readthedocs.io/clustergrammer_js.html#example-pages

我已提取相关代码并正在加载已计算的 JSON。根据在线工作流程，这就是我需要做的。不幸的是，我在构建过程中遇到了 d3 错误。更具体地说，rect 属性高度得到一个无效的负值。

这里是js和html。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://rawgit.com/MaayanLab/clustergrammer/master/clustergrammer.js"></script> 
<!--<script src="https://d3js.org/d3.v4.min.js"></script>-->
<script src="clustergram.js"></script>

</head>

<body ng-app="myApp" ng-controller="clusterCtrl">
  <div id="container"></div>
</body>



</html>

var app = angular.module('myApp', []);

app.controller('clusterCtrl', function($scope) {

//functions
$scope.initialize = initialize;
$scope.build = build;

//variables
$scope.gridSize = 120;

function build() {;
  var cgm = Clustergrammer($scope.args);
}

function initialize() {
    $scope.build();
}

$scope.data = {"cat_colors": {"col": {"cat-0": {"Category: two": "#ffbb78"}, "cat-1": {"Gender: Male": "#ff7f0e"}}, "row": {"cat-0": {"Gene Type: Interesting": "#393b79", "Gene Type: Not Interesting": "#eee"}}}, "col_nodes": [{"cat-0": "Category: two", "cat-1": "Gender: Male", "cat_0_index": 0, "cat_1_index": 0, "clust": 1, "group": [1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0], "ini": 3, "name": "Cell Line: H1650", "rank": 0, "rankvar": 1}, {"cat-0": "Category: two", "cat-1": "Gender: Male", "cat_0_index": 1, "cat_1_index": 1, "clust": 0, "group": [3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 2.0, 2.0, 1.0, 1.0], "ini": 2, "name": "Cell Line: H23", "rank": 1, "rankvar": 0}, {"cat-0": "Category: two", "cat-1": "Gender: Male", "cat_0_index": 2, "cat_1_index": 2, "clust": 2, "group": [2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 1.0, 1.0, 1.0, 1.0], "ini": 1, "name": "Cell Line: CAL-12T", "rank": 2, "rankvar": 2}], "links": [], "mat": [[-0.792803571, 0.527687127, 0.000622536], [0.17762054, -0.016061488999999998, 5.422113832999999], [-0.6978761509999999, -0.555610265, -0.36049755899999997], [0.8505465179999999, -0.263279907, 0.179253031]], "row_nodes": [{"cat-0": "Gene Type: Interesting", "cat_0_index": 0, "clust": 0, "group": [1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0], "ini": 4, "name": "Gene: CDK4", "rank": 1, "rankvar": 2}, {"cat-0": "Gene Type: Not Interesting", "cat_0_index": 1, "clust": 2, "group": [3.0, 3.0, 3.0, 3.0, 2.0, 2.0, 2.0, 2.0, 1.0, 1.0, 1.0], "ini": 3, "name": "Gene: LMTK3", "rank": 3, "rankvar": 3}, {"cat-0": "Gene Type: Not Interesting", "cat_0_index": 2, "clust": 1, "group": [2.0, 2.0, 2.0, 2.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0], "ini": 2, "name": "Gene: LRRK2", "rank": 0, "rankvar": 0}, {"cat-0": "Gene Type: Not Interesting", "cat_0_index": 3, "clust": 3, "group": [4.0, 4.0, 4.0, 4.0, 2.0, 2.0, 2.0, 2.0, 1.0, 1.0, 1.0], "ini": 1, "name": "Gene: UHMK1", "rank": 2, "rankvar": 1}], "views": [{"N_row_sum": "all", "dist": "cos", "nodes": {"col_nodes": [{"cat-0": "Category: two", "cat-1": "Gender: Male", "cat_0_index": 0, "cat_1_index": 0, "clust": 1, "group": [1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0], "ini": 3, "name": "Cell Line: H1650", "rank": 0, "rankvar": 1}, {"cat-0": "Category: two", "cat-1": "Gender: Male", "cat_0_index": 1, "cat_1_index": 1, "clust": 0, "group": [3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 2.0, 2.0, 1.0, 1.0], "ini": 2, "name": "Cell Line: H23", "rank": 1, "rankvar": 0}, {"cat-0": "Category: two", "cat-1": "Gender: Male", "cat_0_index": 2, "cat_1_index": 2, "clust": 2, "group": [2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 1.0, 1.0, 1.0, 1.0], "ini": 1, "name": "Cell Line: CAL-12T", "rank": 2, "rankvar": 2}], "row_nodes": [{"cat-0": "Gene Type: Interesting", "cat_0_index": 0, "clust": 0, "group": [1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0], "ini": 4, "name": "Gene: CDK4", "rank": 1, "rankvar": 2}, {"cat-0": "Gene Type: Not Interesting", "cat_0_index": 1, "clust": 2, "group": [3.0, 3.0, 3.0, 3.0, 2.0, 2.0, 2.0, 2.0, 1.0, 1.0, 1.0], "ini": 3, "name": "Gene: LMTK3", "rank": 3, "rankvar": 3}, {"cat-0": "Gene Type: Not Interesting", "cat_0_index": 2, "clust": 1, "group": [2.0, 2.0, 2.0, 2.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0], "ini": 2, "name": "Gene: LRRK2", "rank": 0, "rankvar": 0}, {"cat-0": "Gene Type: Not Interesting", "cat_0_index": 3, "clust": 3, "group": [4.0, 4.0, 4.0, 4.0, 2.0, 2.0, 2.0, 2.0, 1.0, 1.0, 1.0], "ini": 1, "name": "Gene: UHMK1", "rank": 2, "rankvar": 1}]}}, {"N_row_var": "all", "dist": "cos", "nodes": {"col_nodes": [{"cat-0": "Category: two", "cat-1": "Gender: Male", "cat_0_index": 0, "cat_1_index": 0, "clust": 1, "group": [1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0], "ini": 3, "name": "Cell Line: H1650", "rank": 0, "rankvar": 1}, {"cat-0": "Category: two", "cat-1": "Gender: Male", "cat_0_index": 1, "cat_1_index": 1, "clust": 0, "group": [3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 2.0, 2.0, 1.0, 1.0], "ini": 2, "name": "Cell Line: H23", "rank": 1, "rankvar": 0}, {"cat-0": "Category: two", "cat-1": "Gender: Male", "cat_0_index": 2, "cat_1_index": 2, "clust": 2, "group": [2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 1.0, 1.0, 1.0, 1.0], "ini": 1, "name": "Cell Line: CAL-12T", "rank": 2, "rankvar": 2}], "row_nodes": [{"cat-0": "Gene Type: Interesting", "cat_0_index": 0, "clust": 0, "group": [1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0], "ini": 4, "name": "Gene: CDK4", "rank": 1, "rankvar": 2}, {"cat-0": "Gene Type: Not Interesting", "cat_0_index": 1, "clust": 2, "group": [3.0, 3.0, 3.0, 3.0, 2.0, 2.0, 2.0, 2.0, 1.0, 1.0, 1.0], "ini": 3, "name": "Gene: LMTK3", "rank": 3, "rankvar": 3}, {"cat-0": "Gene Type: Not Interesting", "cat_0_index": 2, "clust": 1, "group": [2.0, 2.0, 2.0, 2.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0], "ini": 2, "name": "Gene: LRRK2", "rank": 0, "rankvar": 0}, {"cat-0": "Gene Type: Not Interesting", "cat_0_index": 3, "clust": 3, "group": [4.0, 4.0, 4.0, 4.0, 2.0, 2.0, 2.0, 2.0, 1.0, 1.0, 1.0], "ini": 1, "name": "Gene: UHMK1", "rank": 2, "rankvar": 1}]}}]};



$scope.args = {
  'root': '#container',
  'network_data': $scope.data
};



$scope.initialize();

});

【问题讨论】：

把你的标签从angular改成angularjs，这是两个不同的东西

标签： javascript angularjs d3.js

【解决方案1】：

您好，我是 Clustergrammer 的主要开发人员。我没有使用过 Angular，但我认为您的错误可能是由于没有为容器 div #container 定义大小造成的。尝试将它的高度和宽度设置为 500 像素，看看是否可行。

【讨论】：

【解决方案2】：

Visualization-JSON 需要三个属性：row_nodes、col_nodes 和 mat（可以使用链接代替 mat，并将继续支持，但默认格式将使用 mat）。这些属性中的每一个都是一个对象数组，这些对象将在下面讨论。示例：

  var data = {
                          "row_nodes":[...],
                          "col_nodes":[...],
                          "mat": [...]
                        }

【讨论】：