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

Question

How to get Distinct values in d3.js.

Here is my code

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, "");} ); 

Here is the sample of data

 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" }];

Answer 1

I am not really sure what exactly you are after. Are you are after the distinct elements of the nodes array, or the distinct values field from the nodes array?

Since there are no duplicated entries in the array itself, I assume you are refering to the unique values field. In that case, you can use the following method to retrieve the unique(distinct) values:

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

and to obtain the unique values, you can do:

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

I hope this helps.

Answer 2

If I got right, you want distinct objects based on object.value .

To find object based on it's properties, you can use following function:

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

Include it in your filter function like this:

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 });

Demo fiddle: http://jsfiddle.net/j3vST/354/ - you will see in console log that only distinct objects (based on object.value are returned).

Answer 3

使用 ES6，您可以使用传播语法：

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