0
我有一個Autodesk Forge擴展（RGraph）。我按照步驟在 http://adndevblog.typepad.com/cloud_and_mobile/2016/02/rgraph-chart-library-and-view-data-api.htmlAutodesk forge RGraph擴展無法正常工作
提及，但我在函數getLeafComponentsRec(parent)得到一個錯誤，該錯誤會Cannot read property 'children' of undefined。
我也試圖根據我的知識修改整個擴展，但即使在那裏我也不成功。我修改後的擴展名就是這樣的。
///////////////////////////////////////////////////////////////////////////////
// Autodesk.ADN.Viewing.Extension.Chart
// by Philippe Leefsma, July 2015
//
// Dependencies:
//
// Bootstrap: 3.3.5
// http://code.jquery.com/jquery-2.1.4.min.js
// https://rawgit.com/caolan/async/master/dist/async.min.js
// https://rawgit.com/nnnick/Chart.js/master/Chart.min.js
//
///////////////////////////////////////////////////////////////////////////////
AutodeskNamespace('Autodesk.ADN.Viewing.Extension.Chart');
Autodesk.ADN.Viewing.Extension.Chart.RGraph = function(viewer, options) {
Autodesk.Viewing.Extension.call(this, viewer, options);
var _self = this;
var _elementIds = [];
var _canvasId = null;
var _components = null;
var instanceTree;
var rootId;
var _graphType = 'pie';
var _propName = 'label';
_self.load = function() {
viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function() {
instanceTree = viewer.model.getData().instanceTree;
rootId = this.rootId = instanceTree.getRootId();
getAlldbIds(rootId);
getAllLeafComponents(function(components) {
_components = components;
_elementIds.push(createDropdownMenu(
'Graph Type', {
top: 50,
left: 330
}, [{
label: 'Pie',
handler: function() {
_graphType = 'pie';
loadChartFromProperty(_graphType, _propName, _components);
}
}]
));
getAvailableProperties(components, function(properties) {
var menuItems = [];
var labelIdx = 0;
_propName = properties[0];
properties.forEach(function(property, idx) {
if (property === 'label') {
labelIdx = idx;
_propName = 'label';
}
menuItems.push({
label: property,
handler: function() {
_propName = property;
loadChartFromProperty(_graphType, _propName, _components);
}
})
});
_elementIds.push(createDropdownMenu(
'Property', {
top: 100,
left: 330
},
menuItems,
labelIdx));
loadChartFromProperty(_graphType, _propName, _components);
});
});
console.log('RGraph extension loaded');
return true;
});
};
///////////////////////////////////////////////////////////////////////////
// unload callback
//
///////////////////////////////////////////////////////////////////////////
_self.unload = function() {
_elementIds.forEach(function(id) {
$('#' + id).remove();
});
$('#' + _canvasId).remove();
console.log('RGraph extension unloaded');
return true;
};
/////////////////////////////////////////////////////////////
///Gets All DbId
///
////////////////////////////////////////////////////////////
function getAlldbIds(rootId) {
var alldbId = [];
if (!rootId) {
console.log(alldbId);
return alldbId;
}
var queue = [];
queue.push(rootId);
while (queue.length > 0) {
var node = queue.shift();
alldbId.push(node);
instanceTree.enumNodeChildren(node, function(childrenIds) {
queue.push(childrenIds);
//viewer.model.getProperties(childrenIds, function (props) {
//var propertyname = props.name.split('[')[0];
// propsqueue.push(props.name.split('[')[0]);
//});
});
}
console.log(alldbId);
//console.log(propsqueue);
}
//////////////////////////////////////////////////////////////////////////
// loadChartFromProperty
//
///////////////////////////////////////////////////////////////////////////
function loadChartFromProperty(chartType, propName, components) {
mapComponentsByPropName(propName, components, function(map) {
// RGraph needs 2 arrays, at least: data & labels
var data = [];
var labels = [];
for (var key in map) {
data.push(map[key].length);
labels.push(key);
}
// clear previous graphs and create a new canvas element
$('#' + _canvasId).remove();
_canvasId = guid();
createOverlay(_canvasId);
var graph;
switch (chartType) {
case 'pie':
// Pie chart
graph = new RGraph.Pie({
id: _canvasId,
data: data,
options: {
shadow: true,
shadowOffsety: 7,
shadowBlur: 25,
strokestyle: 'rgba(0,0,0,0)',
tooltips: labels, // let's use the labels as tooltips
radius: 100
}
}).roundRobin({
frames: 60
})
.grow({
frames: 60
});
}
// on click, let's zoom to the geometry
graph.onclick = function(e, shape) {
var key = shape.tooltip;
viewer.fitToView(map[key]);
};
// on mouse move, highligh/isole the geometry
graph.onmousemove = function(e, shape) {
var key = shape.tooltip;
viewer.isolate(map[key]);
};
});
}
///////////////////////////////////////////////////////////////////////////
// Creates overlay canvas element
//
///////////////////////////////////////////////////////////////////////////
function createOverlay(canvasId) {
var html = [
'<canvas class="graph" id="' + canvasId + '" width="300" height="300">',
'</canvas>',
].join('\n');
$(viewer.container).append(html);
}
///////////////////////////////////////////////////////////////////////////
// Maps components by property
//
///////////////////////////////////////////////////////////////////////////
function mapComponentsByPropName(propName, components, onResult) {
var componentsMap = {};
async.each(components,
function(component, callback) {
getPropertyValue(component, propName, function(value) {
if (propName === 'label') {
value = value.split(':')[0];
}
if (!componentsMap[value]) {
componentsMap[value] = [];
}
componentsMap[value].push(component);
callback();
});
},
function(err) {
onResult(componentsMap);
});
}
///////////////////////////////////////////////////////////////////////////
// Gets all existing properties from components list
//
///////////////////////////////////////////////////////////////////////////
function getAvailableProperties(components, onResult) {
var propertiesMap = {};
async.each(components,
function(component, callback) {
viewer.getProperties(component, function(result) {
for (var i = 0; i < result.properties.length; i++) {
var prop = result.properties[i];
propertiesMap[prop.displayName] = {};
}
callback();
});
},
function(err) {
onResult(Object.keys(propertiesMap));
});
}
///////////////////////////////////////////////////////////////////////////
// Get all leaf components
//
///////////////////////////////////////////////////////////////////////////
function getAllLeafComponents(callback) {
var alldbId = [];
if (!rootId) {
console.log(alldbId);
return alldbId;
}
var queue = [];
queue.push(rootId);
while (queue.length > 0) {
var node = queue.shift();
alldbId.push(node);
instanceTree.enumNodeChildren(node, function(childrenIds) {
queue.push(childrenIds);
//viewer.model.getProperties(childrenIds, function (props) {
//var propertyname = props.name.split('[')[0];
// propsqueue.push(props.name.split('[')[0]);
//});
});
}
console.log(alldbId);
callback(alldbId);
viewer.getObjectTree(function(result) {
var allLeafComponents = rootId;
callback(allLeafComponents);
console.log(allLeafComponents);
});
};
///////////////////////////////////////////////////////////////////////////
// Get property value from display name
//
///////////////////////////////////////////////////////////////////////////
function getPropertyValue(dbId, displayName, callback) {
function _cb(result) {
if (result.properties) {
for (var i = 0; i < result.properties.length; i++) {
var prop = result.properties[i];
if (prop.displayName === displayName) {
callback(prop.displayValue);
return;
}
}
callback('undefined');
}
}
viewer.getProperties(dbId, _cb);
};
///////////////////////////////////////////////////////////////////////////
// Generates random guid
//
///////////////////////////////////////////////////////////////////////////
function guid() {
var d = new Date().getTime();
var guid = 'xxxx-xxxx-xxxx-xxxx'.replace(
/[xy]/g,
function(c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d/16);
return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);
});
return guid;
};
///////////////////////////////////////////////////////////////////////////
// Creates dropdown menu from input
//
///////////////////////////////////////////////////////////////////////////
function createDropdownMenu(title, pos, menuItems, selectedItemIdx) {
var labelId = guid();
var menuId = guid();
var listId = guid();
var html = [
'<div id ="' + menuId + '" class="dropdown chart-dropdown">',
'<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">',
'<label id="' + labelId + '" style="font: normal 14px Times New Roman">' + title + '</label>',
'<span class="caret"></span>',
'</button>',
'<ul id="' + listId + '"class="dropdown-menu scrollable-menu" >',
'</ul>',
'</div>'
].join('\n');
$(viewer.container).append(html);
$('#' + menuId).css({
'top': pos.top + 'px',
'left': pos.left + 'px'
});
$('#' + labelId).text(title + ': ' + menuItems[selectedItemIdx || 0].label);
menuItems.forEach(function(menuItem) {
var itemId = guid();
var itemHtml = '<li id="' + itemId + '"><a href="">' + menuItem.label + '</a></li>';
$('#' + listId).append(itemHtml);
$('#' + itemId).click(function(event) {
event.preventDefault();
menuItem.handler();
$('#' + labelId).text(title + ': ' + menuItem.label);
});
});
return menuId;
}
///////////////////////////////////////////////////////////////////////////
// dynamic css styles
//
///////////////////////////////////////////////////////////////////////////
var css = [
'canvas.graph {',
'top:10px;',
'left:30px;',
'width:300px;',
'height:300px;',
'position:absolute;',
'overflow:hidden;',
'}',
'div.chart-dropdown {',
'position: absolute;',
'}',
'.scrollable-menu {',
'height: auto;',
'max-height: 300px;',
'overflow-x: hidden;',
'overflow-y: scroll;',
'}',
].join('\n');
$('<style type="text/css">' + css + '</style>').appendTo('head');
};
Autodesk.ADN.Viewing.Extension.Chart.RGraph.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
Autodesk.ADN.Viewing.Extension.Chart.RGraph.prototype.constructor = Autodesk.ADN.Viewing.Extension.Chart.RGraph;
Autodesk.Viewing.theExtensionManager.registerExtension('Autodesk.ADN.Viewing.Extension.Chart.RGraph', Autodesk.ADN.Viewing.Extension.Chart.RGraph);在該修改後的代碼我的擴展加載罰款，甚至顯示了圖表類型和屬性的下拉菜單。但是當我選擇它時，我沒有看到圖表。這裏的問題存在於getAvailableProperties(components, onResult)函數中。另外我注意到，在createDropdownMenu函數中，開發人員工具沒有達到斷點。
我不知道我要去哪裏錯。有人可以幫我過來嗎？ 在此先感謝。