Javascript '；attr（）'；函数不处理新创建的元素

在此代码中，

attr（）

对新创建的元素不起作用：

var rects = svgElem
    .selectAll("rect")
    .data(newArray);

rects.attr("fill", "black");

rects.enter()
    .append("rect")
    .attr("fill", "blue");

// this must work on enter and update but not working 
rects.attr("height", (d, i) => {
    return bar_height(d["data"]);
})

为什么呢

---

这是小提琴的链接：

这是D3V4，不是D3V3。虽然您的代码可以在D3V3中工作，但在D3V4中不再工作。这就是原因：

您的

rects

选择

var rects = svgElem
    .selectAll("rect")
    .data(newArray);

。。。是一个“更新”选项。因此，您正在设置的所有属性

rects.attr("height", (d, i) => {
    return bar_height(d["data"]);
})
//etc...

。。。正在设置为空的选择

解决方案：在“输入”选项中设置属性：

rects.enter()
    .append("rect")
    .attr("fill", "blue")
    .attr("height", (d, i) => {
        return bar_height(d["data"]);
    })
    //etc...

以下是更改后的代码：

var数据数组=[{
“名称”：“灯心草黄芪”，
“拉丁语”：“黄芪”，
“光”：“绿色”，
“轻松”：77
}, {
“名称”：“Littleleaf Minerslettuce”，
“拉丁语”：“小叶山（Moc.ex DC.）Greene ssp.parvifolia”，
“光”：“毛夫”，
“轻松”：-69
}, {
“姓名”：“紫黛拉”，
“拉丁语”：“Dalea lasiathera A.Gray”，
“光”：“绿色”，
“轻松”：12
}, {
“名称”：“强囊状物”，
“拉丁语”：“Lesquerella valida Greene”，
“光”：“绿色”，
“轻松”：33
}, {
“名称”：“沼泽草”，
“拉丁语”：“Gnaphalium uliginosum L.”，
“光”：“毛夫”，
“轻松”：76
}, {
“姓名”：“凯的格拉玛”，
“拉丁语”：“Bouteloua kayi Warnock”，
“光”：“毛夫”，
“轻松”：-58
}, {
“名称”：“电报厂”，
“拉丁语”：“Codariocalyx motorius（Houtt.）H.Ohashi”，
“光”：“橙色”，
“轻松”：73
}, {
“名称”：“西部捕蝇”，
“拉丁语”：“西林西齿鱼S.Watson ssp.longistipitata C.L.Hitchc&Maguire”，
“光”：“紫色”，
“轻松”：21
}, {
“名称”：“Toyon”，
“拉丁语”：“大果紫荆”（Munz）Munz”，
“光”：“靛蓝”，
“轻松”：-21
}, {
“名称”：“木蒲草”，
“拉丁语”：“紫红苔草变种”，
“光”：“粉红”，
“轻松”：19
}, {
“名称”：“明显的驯鹿苔藓”，
“拉丁语”：“Cladina combicua Ahti”，
“光”：“绿色”，
“轻松”：-86
}, {
“名称”：“美国曼尼格拉斯”，
“拉丁语”：“大甘油S.沃森”，
“光”：“紫罗兰色”，
“轻松”：78
}, {
“名称”：“格陵兰水草”，
“拉丁语”：“河豚”，
“光”：“Puce”，
“轻松”：36
}, {
“名称”：“圣巴巴拉岛永生”，
“拉丁语”：“达德利亚·特拉斯凯（玫瑰色）莫兰”，
“光”：“紫色”，
“轻松”：94
}, {
“姓名”：“Harrisella”，
“拉丁语”：“Harrisella Fawc&Rendle”，
“光”：“Puce”，
“轻松”：-20
}];
var height=window.innerHeight，
宽度=window.innerWidth；
var svgElem=d3.选择（“内容”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
var color=d3.scaleLinear（）
.domain（[-100,0，+100]）
.范围（[“红色”、“白色”、“绿色”）；
更新（数据阵列）；
函数更新（数据数组）{
var newArray=dataArray.map（函数（项）{
项目[“数据”]=数学地板（数学随机（）*100）；
退货项目；
});
var barWidth=width/dataArray.length；
var elemDomain=d3.extent（新数组，函数（d）{
返回数据
});
var bar_height=d3.scaleLinear（）
.域（elemDomain）
.范围（[0，高度]）；
var rects=svgElem
.selectAll（“rect”）
.数据（新阵列）；
//矩形属性（“填充”、“黑色”）；
rects.enter（）.append（“rect”）.attr（“填充”、“蓝色”）
.attr（“高度”，（d，i）=>{
返回条高度（d[“数据”]）；
}).attr（“宽度”，函数（w）{
返回条宽度；
}).attr（“x”，函数（x，i）{
返回i*条宽；
}).attr（“y”，函数（数据，i）{
返回高度-条形高度（数据[“数据”]）；
});
}

问题正文中没有问题，只有标题。我刚刚编辑了你的帖子，添加了一个实际问题。下一次，请多花点时间写下你的问题，不仅是关于这个社区的人，而且是为了避免投反对票（你已经有2票了）。好的，下次会处理好的谢谢你的回答。我真正想做的是通过向数组中添加新对象来更新dataArray，并使用新dataArray再次运行更新函数。生成的图形将为新添加的条生成不同的颜色，并为其他条生成不同的颜色。这就是为什么我将更新和输入代码分开，并希望一次将公共属性应用于这两种代码。这在D3V4中可能吗？是的。只需复制更新时应该相同的

attr（）

，然后输入选择，或者使用

merge（）

。这是您的带有

merge（）

的代码：对于您的问题，您可以将

attr（“fill”，…）

分开。问题是您必须在enter选择中设置宽度、高度、x和y（至少）。