如何在（Angular）JS中为D3树状图格式化JS对象答案

【问题标题】：How do I Format a JS Object for a D3 Dendrogram Chart in (Angular)JS如何在（Angular）JS中为D3树状图格式化JS对象
【发布时间】：2016-11-05 14:53:11
【问题描述】：

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

道歉：我知道 ElasticUI 已经贬值了，因为它不再被维护，但它给我带来了很长的路要走，让我以我作为 Javascript 和 AngularJS 的初学者永远无法想象的方式来试验弹性数据，如果我直接跳进去并且仅使用 elasticsearch.js 并尝试为其编写“服务”。第二件事：我说我有一个对象，但据我所知，它可能是 JSON 数据、数组或格式化字符串。浏览器控制台说我的数据包含“对象”。

这是我的 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

【问题讨论】：

标签： javascript angularjs json d3.js

【解决方案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 中为每个桶添加一个 termsAggregation。

【讨论】：