我想用D3树形图来扩展ElasticUI项目。如何在(角)JS中格式化D3树形图的JS对象
Apolagia: 我知道ElasticUI折旧,因为它不再维护,但它给我带来了一个很长的路,让我尝试用我,在JavaScript和AngularJS共初学者做梦也想不到的方式弹性数据我直接跳了进去,只用了elasticsearch.js,并试图为它编写一个“服务”。第二件事:我说我有一个Object,但它可能是JSON数据,一个Array或一个格式化的String,就我所知。浏览器控制台说我的数据包含“对象”。
这是我的html的瘦身版本,只有树状图。
<body eui-enabled="true" ng-app="moviesearch" ng-controller="IndexController" eui-index="indexName">
<div id="dendrogram" class="d3-chart">
<eui-singleselect field="tweetMsg" size="10"></eui-singleselect>
<div class="nav nav-list" eui-aggregation="ejs.TermsAggregation('entries').field('tweetMsg').size(20)" eui-filter="ejs.TermsFilter('tweetMsg', bucket.key)" eui-enabled="filter.enabled" eui-filter-self="true">
<eui-var eui-key="dendroSelectorChartConfig" eui-value='
{
"name": "Top Level",
"children": (treeMap(aggResult.buckets))
}
'/>
<div class="container well">
<div d3-hierarchy="dendroSelectorChartConfig" depth="3"></div>
</div>
</div>
</div>
这里是我的控制器的功能。它可能不应该在我的控制器应该吗?我无法以其他方式使其工作。
$scope.treeMap = function mainTreeMapDiagramData(data) {
var i;
for(i = 0; i < data.length; i++) {
console.log("{\"name\":" + "\"" + data[i].key + "\"},");
// return "{\"name\":" + "\"" + data[i].key + "\"},";
}
};
你可能会笑,但其实这正确地记录所产生的聚合条款对浏览器控制台:
app.js:87 {"name":"https"},{"name":"t.co"},{"name":"movie"},{"name":"rt"}, {"name":"the"},{"name":"film"},{"name":"a"},{"name":"to"},{"name":"in"},{"name":"of"},{"name":"and"},
等等
但是,如果我注释掉我的console.log ()并取消我的“返回”... D3不显示任何内容。如果我将上面的列表直接复制到我的HTML中,它就可以工作。
我甚至还没有开始考虑下一个级别 - 就像在孩子们的孩子那样 - 我很乐意为了获得一个级别的工作。
谢谢您的阅读!
编辑:如果有帮助,该项目是在这里在线: https://analytics.molch.at/dendrogram.html