Question

首先我是d3.js noob：）

如何从标题中看到我遇到重复数据的问题并且聚合值是没有选项，因为名称代表不同的公交车站。在这个例子中，停靠点可能位于建筑物的前侧和后侧。

当然，我喜欢在x轴上显示名称。

如果我创建了一个示例，结果是一团糟，请参阅jsFiddel。

x = index
name =巴士站名称
n = value

我有一个json，例如：

[{
  "x": 0,
  "name": "Corniche St / Abu Dhabi Police GHQ",
  "n": 113
},
{
  "x": 1,
  "name": "Corniche St / Nation Towers",
  "n": 116
},
{
  "x": 2,
  "name": "Zayed 1st St / Al Khalidiya Public Garden",
  "n": 146
}, 
...
{
  "x": 49,
  "name": "Hamdan St / Tariq Bin Zeyad Mosque",
  "n": 55
}]

问题：名称可能会出现多次，例如

{
"x": 1,
"name": "Corniche St / Nation Towers",
"n": 116
}
and
{
"x": 4,
"name": "Corniche St / Nation Towers",
"n": 105
}

我想知道有没有办法告诉d3.js不要＆＃34;删除＆＃34;重复的名称，而只是按其值显示所有名称。

非常欢迎任何想法或建议:)如果您需要更多信息，请告诉我。

先谢谢了马里奥

Answer 1

Lars是对的：d3.ordinal标度正是它应该做的：将重复值视为重复实例。有关详情，请参阅此处：https://github.com/mbostock/d3/wiki/Ordinal-Scales

您可以使用常规线性比例，如下所示：http://jsfiddle.net/vy8vjy4r/2/

更改是使比例变为线性，并将域设置为数据集的长度。

var x = d3.scale.linear().domain([0,j_data.length]).range([0, width]),

将值传递给比例时，只需传递列表中的位置即可。我正在使用索引 - 函数中的i（d，i） - 但您可以在数据集中使用x。（我没有使用它，因为它看起来你不需要它。）

.x(function (d,i) { return x(i); })

希望这适合你。

关于轴的其他信息

严格地说，我想这应该是一个额外的问题，但是为了获得轴上的文本，你可以简单地在xAxisGroup中修改文本的地方添加这两行代码，在.selectAll（“text”之后））：

.data(j_data.filter(function(d,i) { return !(i%5); }))
.text(function(d){ return d.name; })

轴每隔五个项目显示一次数字，因此我们从数据集中选择每五个项目。这为我们提供了与现有标签匹配的数据，我们将文本更改为.name值，请参阅http://jsfiddle.net/vy8vjy4r/4/

这种方法并不是特别强大：它取决于D3显示每隔五个停止点，对于短途或非常长的路线（或其他任何路线），它可能会显示所有停靠点，或者每隔十分之一等等。我宁愿不使用D3轴并建立自己的。对于这样的事情，它应该不会太难，尽管在这个空间中拟合所有的名字可能很难。

试试这个：http://jsfiddle.net/vy8vjy4r/5/

Answer 2

试试这个过滤器，

var names = [];
var result = [];
var indx=-1;
for(var i=0; i< j_data.length; i++){
    indx = names.indexOf(j_data[i].name);
    if(indx==-1){
        names.push(j_data[i].name);
        result.push(j_data[i]);

    }
}
j_data= result;

在j_data数组之后执行此操作，它将从j_data数组中删除重复的对象。并查看此http://jsfiddle.net/vy8vjy4r/1/

如果不是，您正在寻找什么，请询问您需要的改变。

如何处理d3.js中的重复值

2 个答案: