如何在 d3.js 中获取不同的值？答案

【问题标题】：How to get Distinct values in d3.js?如何在 d3.js 中获取不同的值？
【发布时间】：2016-01-12 02:39:51
【问题描述】：

如何在 d3.js 中获取不同的值。

这是我的代码

var bar = svg.selectAll(".nodes")
    .data(d3.values(nodes.filter(function(d){return d.group==1;})).sort(function(a, b){return b.value - a.value;}))
;

bar.enter().append("rect")
    .filter(function(d) { return d.value > 0 })
    .attr("transform", function(d, i) { return "translate(1200," + i * barHeight + ")"; })
   // .attr("transform", function(d, i) { return "translate(850," + i * barHeight + ")"; })
    .attr("x", function(d) { return width - x(d.value) ; }) 
    .attr("y",56)
    .attr("width", function(d) { return x(d.value); })
    .attr("height", barHeight - 1)
    .attr("fill", function(d) { return color(d.group); })
    //.attr('class', function(d) { return d.node_name;} ); 
    .attr('class', function(d) { return "bar"+d.node_name.replace(/[^a-zA-Z0-9 ]/gi, "");} );

这是数据样本

var nodes = [{
  node_name: "insider.webmetro.com",
  name: "insider.webmetro.com",
  group: 1,
  value: 15.54,
  type: "circle"
}, {
  node_name: "internetmarketing.webmetro.com/About.htm",
  name: "internetmarketing.webmetro.com/About.htm",
  group: 1,
  value: 15.54,
  type: "circle"
}, {
  node_name: "webmetro.com",
  name: "webmetro.com",
  group: 1,
  value: 606,
  type: "circle"
}, {
  node_name: "webmetro.com/About.htm",
  name: "webmetro.com/About.htm",
  group: 1,
  value: 19.5,
  type: "circle"
}, {
  node_name: "webmetro.com/about1.htm",
  name: "webmetro.com/about1.htm",
  group: 1,
  value: 15,
  type: "circle"
}, {
  node_name: "webmetro.com/blog",
  name: "webmetro.com/blog",
  group: 1,
  value: 212,
  type: "circle"
}, {
  node_name: "webmetro.com/blog/pay_per_click/amazing_ppc_tactics_and_bid_simulator_at_smx_advanced.aspx",
  name: "webmetro.com/blog/pay_per_click/amazing_ppc_tactics_and_bid_simulator_at_smx_advanced.aspx",
  group: 1,
  value: 42,
  type: "circle"
}, {
  node_name: "webmetro.com/blog/search_engine_optimization/importance_of_latent_semantic_indexing_in_seo.aspx",
  name: "webmetro.com/blog/search_engine_optimization/importance_of_latent_semantic_indexing_in_seo.aspx",
  group: 1,
  value: 28,
  type: "circle"
}, {
  node_name: "webmetro.com/brochure",
  name: "webmetro.com/brochure",
  group: 1,
  value: 212,
  type: "circle"
}, {
  node_name: "webmetro.com/careers",
  name: "webmetro.com/careers",
  group: 1,
  value: 15.54,
  type: "circle"
}];

【问题讨论】：

但是您共享的节点数组不包含任何重复值。 ??????
我使用节点数组中的value 字段。

标签： javascript css d3.js

【解决方案1】：

在 ES6 中你可以使用 spread syntax:

const distinctValues = [...new Set(data.map((d) => d.column))]

【讨论】：

【解决方案2】：

如果我猜对了，您想要基于 object.value 的不同对象。

要根据对象的属性查找对象，可以使用以下函数：

function findByValue(source, value) {
    return source.filter(function( obj ) {
        return +obj.value === +value;
    })[ 0 ];
}

将它包含在您的 filter 函数中，如下所示：

var result = nodes.filter(function(element_value, element_index, element_array){return element_value.group==1 && element_array.indexOf(findByValue( nodes, element_value.value )) === element_index });

演示小提琴：http://jsfiddle.net/j3vST/354/ - 您将在控制台日志中看到仅返回不同的对象（基于 object.value）。

【讨论】：

如几个类似的答案所示，d3.map(data, function(d) {return d.value;}).keys() 正在工作。

【解决方案3】：

我不太确定你到底在追求什么。您是在寻找 nodes 数组的不同元素，还是 nodes 数组中的不同 values 字段？

由于数组本身没有重复的条目，我假设您指的是唯一的 values 字段。在这种情况下，您可以使用以下方法来检索唯一（不同）值：

function unique(x) {
    return x.reverse().filter(function (e, i, x) {return x.indexOf(e, i+1) === -1;}).reverse();
}

要获取唯一值，您可以这样做：

var unique_values = unique(nodes.map(function(d){return d.value}))

我希望这会有所帮助。

【讨论】：