Question

我正在尝试使用D3树形图来扩展ElasticUI项目。

Apolagia：我知道ElasticUI已被折旧，因为它不再被维护，但它给我带来了很长的路要走，让我以我的方式试验弹性数据，因为如果Javascript和AngularJS中的一个初学者从来没有梦想过我直接跳进去了仅使用elasticsearch.js并尝试为其编写“服务”。第二件事：我说我有一个Object，但它可能是JSON数据，一个数组或一个格式化的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（）并取消注释我的“return”...... D3不会显示任何内容。如果我将上面的列表直接复制到我的HTML中，它就会起作用。

我甚至没有开始考虑下一个级别 - 就像孩子们的孩子一样 - 我只是为了达到一个级别而感到高兴。

感谢您阅读！

编辑：如果有帮助，该项目在线： https://analytics.molch.at/dendrogram.html

Answer 1

这有效：

$scope.treeMap = function mainTreeMapDiagramData(data) {

 var i;
 arr = [];
 for (var key in data){
     if (typeof data[key] !== 'function') {
          arr.push({ name: data[key].key });
     }
 }

 return arr;

 };

然而。单层树状图并不是树状图的重要组成部分。现在我必须弄清楚如何在之前的条款聚集中为每个桶添加一个termsAggregation。

如何在（Angular）JS

1 个答案: