Question

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

Answer 1

我不确定你究竟是在追求什么。您是在追踪nodes数组的不同元素，还是来自values数组的不同nodes字段？

由于数组本身没有重复的条目，我假设您正在引用唯一的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}))

我希望这会有所帮助。

Answer 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）。

Answer 3

在 ES6 中，您可以使用 spread syntax:

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

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

3 个答案: