Javascript 如何在d3js中处理数据阻塞？

我试图创建一种原始数据分布，包括：

• X轴：人（a或b）
• Y轴：强度（以0到4的比例）

是否有任何方法可以防止数据点相互遮挡？例如，当存在一个现有数据点时，具有相同值（不同日期）的下一个数据点将定位在与其偏移的位置，如下图所示

绘图的当前状态

绘图的所需状态

我愿意更改数据格式以获得最终结果

Dataset:

    condition   intensity   date
    a   2   1
    a   3   2
    a   0   3
    a   1   4
    b   3   5
    b   3   6
    b   4   7
    b   4   8

var保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.蜱（5）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
d3.csv（“data.csv”），类型，功能（错误，数据）{
如果（错误）抛出错误；
x、 域（data.map）（函数（d）{
返回d.条件；
}));
y、 域（[0,4]）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
svg.selectAll（“.point”）
.数据（数据）
.enter（）.append（“路径”）
.attr（“类”、“点”）
.attr（“d”，d3.svg.symbol（）.type（“square”）.size（[500]））
.attr（“转换”，函数（d）{
返回“translate”（“+x（d.condition）+”，“+y（d.intensity）+”）；
});
});
功能类型（d）{
d、 严重性=+d.严重性；
返回d；
}

.bar{
填充：钢蓝；
}
.bar:悬停{
填充物：棕色；
}
.安讯士{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}

想出了一个办法

将所有数据点存储在一个数组中，并检查重复的数据点。如果遇到重复，将沿X轴偏移40个像素

var arr = []; // array for holding all the datapoints
var tally = []; // array for storing the duplicates

// Change the squares
    svg.selectAll(".point")
      .attr("d", d3.svg.symbol().type("square").size([500]))
      .attr("transform", function(d) {
    var current = (d.condition + "," + d.severity); // current data point
    var index = arr.indexOf(current); // get the index of current data point in array arr

if (index == -1) { // if index is -1, then no match found. unique data point
  arr.push(current); // push point onto array
  position = "translate(" + x(d.condition) + "," + y(d.severity) + ")";

} else {
  tally.push(current);
  var tallylen = tally.length;
  var tindex = tally.indexOf(current);
  for (var i = 0; i < tallylen; i++) {
    var c = 0;
    if (c == tindex) {
      position = "translate(" + (x(d.condition) + (40 * (i + 1))) + "," + y(d.severity) + ")";
    } else {
      c = tindex;
      position = "translate(" + (x(d.condition) + (40 * (i + 1 - tindex))) + "," + y(d.severity) + ")";
    };

  }
};
return position;
})

var arr=[]；//用于保存所有数据点的数组
变量计数=[]；//用于存储重复项的数组
//换方块
svg.selectAll（“.point”）
.attr（“d”，d3.svg.symbol（）.type（“square”）.size（[500]））
.attr（“转换”，函数（d）{
var current=（d.condition+，“+d.severity）；//当前数据点
var index=arr.indexOf（current）；//获取数组arr中当前数据点的索引
如果（索引==-1）{//如果索引为-1，则未找到匹配项。唯一数据点
arr.push（当前）；//将点推到阵列上
position=“translate”（“+x（d.condition）+”，“+y（d.severity）+”）；
}否则{
理货。推（当前）；
var Tallelen=tally.length；
var tindex=理货指数（当前）；
对于（var i=0；i

如果有人有更好的解决方案，请发布。

想出了一个办法

将所有数据点存储在一个数组中，并检查重复的数据点。如果遇到重复，将沿X轴偏移40个像素

var arr = []; // array for holding all the datapoints
var tally = []; // array for storing the duplicates

// Change the squares
    svg.selectAll(".point")
      .attr("d", d3.svg.symbol().type("square").size([500]))
      .attr("transform", function(d) {
    var current = (d.condition + "," + d.severity); // current data point
    var index = arr.indexOf(current); // get the index of current data point in array arr

if (index == -1) { // if index is -1, then no match found. unique data point
  arr.push(current); // push point onto array
  position = "translate(" + x(d.condition) + "," + y(d.severity) + ")";

} else {
  tally.push(current);
  var tallylen = tally.length;
  var tindex = tally.indexOf(current);
  for (var i = 0; i < tallylen; i++) {
    var c = 0;
    if (c == tindex) {
      position = "translate(" + (x(d.condition) + (40 * (i + 1))) + "," + y(d.severity) + ")";
    } else {
      c = tindex;
      position = "translate(" + (x(d.condition) + (40 * (i + 1 - tindex))) + "," + y(d.severity) + ")";
    };

  }
};
return position;
})

var arr=[]；//用于保存所有数据点的数组
变量计数=[]；//用于存储重复项的数组
//换方块
svg.selectAll（“.point”）
.attr（“d”，d3.svg.symbol（）.type（“square”）.size（[500]））
.attr（“转换”，函数（d）{
var current=（d.condition+，“+d.severity）；//当前数据点
var index=arr.indexOf（current）；//获取数组arr中当前数据点的索引
如果（索引==-1）{//如果索引为-1，则未找到匹配项。唯一数据点
arr.push（当前）；//将点推到阵列上
position=“translate”（“+x（d.condition）+”，“+y（d.severity）+”）；
}否则{
理货。推（当前）；
var Tallelen=tally.length；
var tindex=理货指数（当前）；
对于（var i=0；i

---

如果有人有更好的解决方案，请发布它。

可以考虑添加一些<代码> Alpha < /C> >，这会使重叠点比其余的点暗。alpha是一个很好的解决方案，但我需要能够点击个别数据点进行进一步的交互，因此，需要对它们进行偏移：）可以考虑将一些<代码> Alpha < /代码>添加到那些会使重叠点比其余部分暗的点。alpha是一个很好的解决方案，但我需要能够单击个别数据点以进行进一步的交互，因此需要对它们进行偏移：