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関数では、開発者ツールがブレークポイントにヒットしていないことに気付きました。
どこが間違っているのか分かりません。誰かが私を助けてくれますか？ ありがとうございます。