Javascript 从树状对象获取唯一元素列表

Javascript 从树状对象获取唯一元素列表,javascript,arrays,Javascript,Arrays,在我的小应用程序中,我有一个返回树状数据的函数: function getData() { return { "name": "fish", "children": [{ "name": "mussels & clams", "children": [{ "name": "fennel", "size": 1 }, { "name

在我的小应用程序中,我有一个返回树状数据的函数:

function getData() {
return {
    "name": "fish",
        "children": [{
        "name": "mussels & clams",
            "children": [{
            "name": "fennel",
                "size": 1
        }, {
            "name": "garlic",
                "size": 1
        }, {
            "name": "lemon",
                "size": 1
        }, {
            "name": "onion",
                "size": 1
        }, {
            "name": "parsley",
                "size": 1
        }, {
            "name": "pasta",
                "size": 1
        }, {
            "name": "rice",
                "size": 1
        }, {
            "name": "soup",
                "size": 1
        }, {
            "name": "tomato",
                "size": 1
        }]
    }, {
        "name": "octopus",
            "children": [{
            "name": "bay",
                "size": 1
        }, {
            "name": "chilli",
                "size": 1
        }, {
            "name": "lemon",
                "size": 1
        }, {
            "name": "olive oil",
                "size": 1
        }, {
            "name": "paprika",
                "size": 1
        }, {
            "name": "parsley",
                "size": 1
        }, {
            "name": "pine nuts",
                "size": 1
        }]
    }, {
        "name": "oysters",
            "children": [{
            "name": "asparagus",
                "size": 1
        }, {
            "name": "bacon",
                "size": 1
        }, {
            "name": "butter",
                "size": 1
        }, {
            "name": "cellery",
                "size": 1
        }, {
            "name": "chives",
                "size": 1
        }, {
            "name": "garlic",
                "size": 1
        }, {
            "name": "lemon",
                "size": 1
        }, {
            "name": "mozzarella",
                "size": 1
        }, {
            "name": "onion",
                "size": 1
        }, {
            "name": "pasta",
                "size": 1
        }, {
            "name": "parsley",
                "size": 1
        }, {
            "name": "shallot",
                "size": 1
        }]
    }, {
        "name": "pink fish",
            "children": [{
            "name": "balsamic vinegar",
                "size": 1
        }, {
            "name": "chives",
                "size": 1
        }, {
            "name": "cream",
                "size": 1
        }, {
            "name": "dill",
                "size": 1
        }, {
            "name": "garlic",
                "size": 1
        }, {
            "name": "ham",
                "size": 1
        }, {
            "name": "honey",
                "size": 1
        }, {
            "name": "lemon",
                "size": 1
        }, {
            "name": "lime",
                "size": 1
        }, {
            "name": "mild cheese",
                "size": 1
        }, {
            "name": "miso",
                "size": 1
        }, {
            "name": "potato",
                "size": 1
        }, {
            "name": "sesame",
                "size": 1
        }, {
            "name": "soy souce",
                "size": 1
        }, {
            "name": "spinach",
                "size": 1
        }, {
            "name": "thyme",
                "size": 1
        }]
    }, {
        "name": "shrimp",
            "children": [{
            "name": "coriander",
                "size": 1
        }, {
            "name": "curry",
                "size": 1
        }, {
            "name": "ginger",
                "size": 1
        }, {
            "name": "lemon",
                "size": 1
        }, {
            "name": "lime",
                "size": 1
        }, {
            "name": "lobster",
                "size": 1
        }, {
            "name": "parsley",
                "size": 1
        }, {
            "name": "soft cheese",
                "size": 1
        }, {
            "name": "tomato",
                "size": 1
        }]
    }, {
        "name": "smoked fish",
            "children": [{
            "name": "asparagus",
                "size": 1
        }, {
            "name": "butter",
                "size": 1
        }, {
            "name": "eggs",
                "size": 1
        }, {
            "name": "lemon",
                "size": 1
        }, {
            "name": "mandarin",
                "size": 1
        }, {
            "name": "mild cheese",
                "size": 1
        }, {
            "name": "mushrooms",
                "size": 1
        }, {
            "name": "onion",
                "size": 1
        }, {
            "name": "potato",
                "size": 1
        }, {
            "name": "spring onion",
                "size": 1
        }]
    }, {
        "name": "squid",
            "children": [{
            "name": "bacon",
                "size": 1
        }, {
            "name": "courgette",
                "size": 1
        }, {
            "name": "cumin",
                "size": 1
        }, {
            "name": "garlic",
                "size": 1
        }, {
            "name": "lemon",
                "size": 1
        }, {
            "name": "lime",
                "size": 1
        }, {
            "name": "onion",
                "size": 1
        }, {
            "name": "parsley",
                "size": 1
        }, {
            "name": "peper",
                "size": 1
        }, {
            "name": "rocket",
                "size": 1
        }, {
            "name": "thyme",
                "size": 1
        }]
    }, {
        "name": "sushi",
            "children": [{
            "name": "coriander",
                "size": 1
        }, {
            "name": "couscous",
                "size": 1
        }, {
            "name": "cucumber",
                "size": 1
        }, {
            "name": "ginger",
                "size": 1
        }, {
            "name": "lemon",
                "size": 1
        }, {
            "name": "lime",
                "size": 1
        }, {
            "name": "pepper",
                "size": 1
        }, {
            "name": "rice",
                "size": 1
        }, {
            "name": "sesame",
                "size": 1
        }, {
            "name": "soya souce",
                "size": 1
        }, {
            "name": "spring onion",
                "size": 1
        }, {
            "name": "wasabi",
                "size": 1
        }]
    }, {
        "name": "white fish",
            "children": [{
            "name": "butter",
                "size": 1
        }, {
            "name": "courgette",
                "size": 1
        }, {
            "name": "gream",
                "size": 1
        }, {
            "name": "fennel",
                "size": 1
        }, {
            "name": "french beans",
                "size": 1
        }, {
            "name": "garlic",
                "size": 1
        }, {
            "name": "leak",
                "size": 1
        }, {
            "name": "lemon",
                "size": 1
        }, {
            "name": "lime",
                "size": 1
        }, {
            "name": "mild cheese",
                "size": 1
        }, {
            "name": "onion",
                "size": 1
        }, {
            "name": "parsley",
                "size": 1
        }, {
            "name": "soup",
                "size": 1
        }, {
            "name": "soya souce",
                "size": 1
        }, {
            "name": "tomato",
                "size": 1
        }]
    }, {
        "name": "caviar",
            "children": [{
            "name": "chives",
                "size": 1
        }, {
            "name": "eggs",
                "size": 1
        }, {
            "name": "sour cream",
                "size": 1
        }, {
            "name": "strong cheese",
                "size": 1
        }]
    }, {
        "name": "lobster & crab",
            "children": [{
            "name": "chili",
                "size": 1
        }, {
            "name": "coriander",
                "size": 1
        }, {
            "name": "fennel",
                "size": 1
        }, {
            "name": "ginger",
                "size": 1
        }, {
            "name": "leek",
                "size": 1
        }, {
            "name": "mayonnaise",
                "size": 1
        }, {
            "name": "parsley",
                "size": 1
        }, {
            "name": "pasta",
                "size": 1
        }, {
            "name": "peas",
                "size": 1
        }, {
            "name": "rice",
                "size": 1
        }, {
            "name": "sesame",
                "size": 1
        }, {
            "name": "soy sauce",
                "size": 1
        }, {
            "name": "wasabi",
                "size": 1
        }]
    }]
};}
数据可视化如下所示:

这是

我想在主关系图的右侧创建一个标签列表,其中包含在树的叶子中找到的所有值,但每个值只包含一次。换句话说,它应该包含:

  • “芦笋”
  • “培根”
  • “香醋”
  • 等等
(就像所有树叶的“结合”)

如何获得具有唯一元素的数组

(一旦有了该数组,显示标签对我来说就不是问题了)


干杯

检索所有名称属性/属性很容易

var fishNames = nodes.map(function(x){return x.name});

要获取javascript中数组的唯一值,请检查。

检索所有名称属性/属性很容易

var fishNames = nodes.map(function(x){return x.name});

要获取javascript中数组的唯一值,请检查。

您需要在对象上执行标准树遍历。例如,假设您有一个在每个节点执行回调的函数:

walkObject(obj, function(obj, name, parent){
  /* obj === parent[name] */
});
所以我会:

var names = {};
walkObject(nodes, function(obj, name, parent){
  if (name !== 'name') return;
  names[obj] = true;
});
var uniqueList = Object.keys(names);

希望有帮助。

您需要在对象上执行标准树遍历。例如,假设您有一个在每个节点执行回调的函数:

walkObject(obj, function(obj, name, parent){
  /* obj === parent[name] */
});
所以我会:

var names = {};
walkObject(nodes, function(obj, name, parent){
  if (name !== 'name') return;
  names[obj] = true;
});
var uniqueList = Object.keys(names);

希望这会有所帮助。

因此,使用诸如或之类的库,您肯定可以非常轻松地做到这一点

然而,这里有一种方法可以让你不用依赖外部

function flatMap (arr, selector) {
  return Array.prototype.concat.apply([], arr.map(selector));
}

var names =
  flatMap(getData().children, function (x) { return x.children; })
    .map(function (x) { return x.name; });

var length = names.length;
var namesAndCount = {};

for (var i = 0; i < length; i++) {
  var name = names[i];
  namesAndCount[name] = namesAndCount[name] ? namesAndCount[name] + 1 : 1;
}

所以你可以很容易地用一个库,比如,或者

然而,这里有一种方法可以让你不用依赖外部

function flatMap (arr, selector) {
  return Array.prototype.concat.apply([], arr.map(selector));
}

var names =
  flatMap(getData().children, function (x) { return x.children; })
    .map(function (x) { return x.name; });

var length = names.length;
var namesAndCount = {};

for (var i = 0; i < length; i++) {
  var name = names[i];
  namesAndCount[name] = namesAndCount[name] ? namesAndCount[name] + 1 : 1;
}

不,这不会遍历子节点。你必须遍历整个树。节点是他在脚本中使用的一个变量:
var root=getData(),nodes=radialCluster.nodes(root),…
你明白我的意思吗?假设
radialCluster.nodes(root)
返回一个展开列表,那么是。不,这不会遍历子节点。你必须遍历整个树。节点是他在脚本中使用的变量:
var root=getData(),nodes=radialCluster.nodes(root),…
你明白我的意思吗?假设
radialCluster.nodes(root)
返回一个扁平列表,那么是的。