我正在尝试使用在此处开发的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();
});
最佳答案
嗨，我是Clustergrammer的主要开发人员。我没有使用过Angular，但是我认为您的错误可能是由于未为容器div #container定义大小而引起的。尝试将其高度和宽度设置为500px，看看是否可行。
关于javascript - Clustergrammer获得矩形的负值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44656078/