D3.js d3未向绑定的矩形显示初始数据

我有一个对象的初始数组，它是我的数据。调用名为

render（）

的函数，该函数应首先显示绑定到此数据的矩形。但我没有看到任何矩形

然后，如果单击这些矩形中的任何一个，将调用函数

removeElement

，该函数从数组中删除该矩形的数据，然后调用

render（）

，并使用新数据执行该矩形

如果在向数据添加新数据元素的任何位置单击svg，然后再次调用render，它将根据新数据再次显示矩形

/*.主动{
行程：#000；
笔画宽度：2px；
}*/
svg{
边框：1px纯黑；
}
var保证金={
前20名，
右:20,，
底数：20，
左：20
},
宽度=840-margin.left-margin.right，
高度=640-margin.top-margin.bottom；
var svg=d3.选择（“svg”）；
风险值数据=[{
x:100
}, {
x:300
}, {
x:400
}, {
x:600
}];
var-ind=0；
var groove=svg.append（“g”）
.attr（“类别”、“groove_集团”）；
groove.append（“rect”）
.attr（“x”，0）
.attr（“y”，150）
.attr（“rx”，2）
.attr（“ry”，2）
.attr（“高度”，6）
.attr（“宽度”，宽度）
.样式（“填充”、“灰色”）；
groove.append（“rect”）
.attr（“x”，2）
.attr（“y”，152）
.attr（“rx”，2）
.attr（“ry”，2）
.attr（“高度”，2）
.attr（“宽度”，796）
.样式（“填充”、“黑色”）；
render（）；
函数render（）{
//创建组
var group=svg.selectAll（空）
.数据（数据、功能（d）{
返回d.x
});
group.exit（）.remove（）；
group.enter（）.append（“g”）
.attr（“类”、“组”）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
.on（“结束”，绘图））
。打开（“单击”，删除）；
组。追加（“rect”）
.attr（“x”，函数（d）{
返回d.x；
})
.attr（“y”，100）
.attr（“高度”，100）
.attr（“宽度”，15）
.样式（“填充”、“浅蓝色”）
.attr（'id'，函数（d，i）{
返回“句柄”+i；
})
.attr（“rx”，6）
.attr（“ry”，6）
.attr（“笔划宽度”，2）
.attr（“笔划”、“黑色”）；
组。追加（“文本”）
.attr（“x”，函数（d，i）{
如果（i==0）{//第一个元素
返回（（数据[i].x/2））；
}否则{
返回（数据[i].x-（数据[i].x-data[i-1].x）/2）；
}
})
.attr（“y”，100）
.attr（“文本锚定”、“中间”）
.样式（“填充”、“黑色”）
.attr（'id'，函数（d，i）{
返回“文本”+i；
})
.文本（功能（d，i）{
如果（i==0）{//第一组
返回i+“：”+（数据[i].x）+“m”；
}否则{
返回i+“：”+（（数据[i].x-data[i-1].x））+“m”；
}
});
}
打开（“单击”，函数（）{
var coords=d3.鼠标（此）；
getPosition（ind，coords[0]）；
render（）；
});
函数dragstarted（d）{
d3.选择（this）.raise（）.classed（“活动”，true）；
}
函数（d，i）{
如果（i==0）{
d3.选择（“#文本”+i）
.attr（“x”，d.x=（d3.event.x/2））
.文本（功能（d）{
返回i+“”+d3.event.x
});
d3.选择（“#文本”+（i+1））
.attr（“x”，d.x=d3.event.x+（（数据[i+1].x-d3.event.x）/2））
.文本（功能（d）{
返回（i+1）+“”+（数据[i+1].x-d3.event.x）+“m”
});
d3.选择（这个）。选择（“rect”）
.attr（“x”，d.x=d3.event.x）；
}else if（i==data.length-1）{
d3.选择（“#文本”+i）
.attr（“x”，d.x=（d3.event.x-data[i-1].x）/2+data[i-1].x）
.文本（功能（d）{
返回i+“：”+（d3.event.x-data[i-1].x）+“m”
});
d3.选择（“#文本”+（i+1））
.attr（“x”，d.x=d3.event.x+（宽度-d3.event.x）/2）
.文本（功能（d）{
return（i+1）+“：”+（width-d3.event.x）+“m”
});
d3.选择（这个）。选择（“rect”）
.attr（“x”，d.x=d3.event.x）；
}否则{
d3.选择（“#文本”+i）
.attr（“x”，d.x=d3.event.x-（（d3.event.x-data[i-1].x）/2））
.文本（功能（d）{
返回i+“：”+（d3.event.x-data[i-1].x）+“m”
});
d3.选择（“#文本”+（i+1））
.attr（“x”，d.x=d3.event.x+（（数据[i+1].x-d3.event.x）/2））
.文本（功能（d）{
返回（i+1）+:“+（数据[i+1].x-d3.event.x）+”m”
});
d3.选择（这个）。选择（“rect”）
.attr（“x”，d.x=d3.event.x）；
}
}
函数d（d）{
d3.选择（本）
.分类（“活动”，虚假）；
}
函数删除元素（d，i）{
d3.event.stopPropagation（）；
data=data.filter（函数（e）{
返回e！=d；
});
d3.选择（本）
.remove（）；
render（）；
}
函数getPosition（ind，coords）{
if（坐标[0]>数据[ind].x）{
getPosition（++ind）；
}否则{
数据拼接（1，0{
x:coords
});
}
}

如果您查看

组

var group = svg.selectAll(null)
    .data(data, function(d) {
        return d.x
    });

。。。您将看到它只是一个“更新”选择。这里没有添加SVG

元素。因此，这

group.append("rect")
    //etc...

没有效果

解决方案：使用

merge（）

函数或正确的enter选择：

var groupEnter = group.enter()
    .append("g")
    .attr("class", "group");

groupEnter.append("rect")
    //etc...

以下是更新的代码：

/*.主动{
行程：#000；
笔画宽度：2px；
}*/
svg{
边框：1px纯黑；
}
var保证金={
前20名，
右:20,，
底数：20，
左：20
},
宽度=840-margin.left-margin.right，
高度=640-margin.top-margin.bottom；
var svg=d3.选择（“svg”）；
风险值数据=[{
x:100
}, {
x:300
}, {
x:400
}, {
x:600
}];
var-ind=0；
var groove=svg.append（“g”）
.attr（“类别”、“groove_集团”）；
groove.append（“rect”）
.attr（“x”，0）
.attr（“y”，150）
.attr（“rx”，2）