Javascript 数据未绑定到d3中的选择

我在绑定数据时遇到了一个问题，数据被绑定到某些选择，而不是其他选择

对于上下文，我在csv文件中有一系列行。使用d3，我迭代每一行，并为csv文件中的每一行生成svg。如下所示

var svgArea = d3.select("body").append("svg")
.attr("class", "barSvg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

然后，我打算使用此选择将

元素和一系列

元素绑定到svg选择：

//creating a <g> elements
var vehicleText = svgArea.select("g")
.data(d)
.enter()
.append("g")
.attr("id", function(d) {return "vehicle_" + d.vehicle});

//creating a grouped bar chart
var vehicleBars = svgArea.selectAll("rect")
.data(d.sales)
.enter()
.append("rect")
.attr("class", "vehicleBars")
.attr("id", function (d) {return "vehicle_" + d.vehicle + "_" + d.year})
.attr("width", width / 4)
.attr( "x", function (d){
  return xYears(d.year)
})
.attr("y", function(d){
  return yScale(d.value)
})
.attr("height", function(d) {return height - yScale(d.value)})
.attr("fill", function(d) {return colorScale(d.year)});

//创建一个元素
var vehicleText=svgArea.选择（“g”）
.数据（d）
.输入（）
.附加（“g”）
.attr（“id”，函数（d）{return“vehicle”+d.vehicle}）；
//创建分组条形图
var vehicleBars=svgArea.selectAll（“rect”）
.数据（d.销售）
.输入（）
.append（“rect”）
.attr（“类”、“车辆杆”）
.attr（“id”，函数（d）{返回“车辆”+d.vehicle+“+d.year}）
.attr（“宽度”，宽度/4）
.attr（“x”，函数（d）{
返回日期（d.年）
})
.attr（“y”，函数（d）{
返回Y刻度（d值）
})
.attr（“高度”，函数（d）{返回高度-yScale（d.value）}）
.attr（“fill”，函数（d）{return colorScale（d.year）}）；

---

问题是

元素不会出现，但是

元素会出现，尽管使用了完全相同的选择。我一直认为这可能是我将数据绑定到元素的方式的问题。我到底做错了什么？为什么它绑定一组元素的数据，而不绑定进行该操作的元素集

这里有两个主要问题：

svg中已经有

元素。因此，您的输入选择应该选择不存在的内容，而不是

select（“g”）

，例如

selectAll（“foo”）

d

是一个对象。但是，

数据

函数只接受三件事：数组、函数或无。因此，它应该是

数据（[d]）

这个问题#2解释了为什么，正如你所说

数据将绑定到某些选择，但不绑定到其他选择

。。。以及为什么您的

console.log（vehicleText.datum（））

返回的

无法读取null的属性'\uuuu data'

这就是说，这是您更新的plunker：

然而，这不是实现你想要的最好方式，也不是我自己做的方式：记住，这里我只是回答你的问题，没有别的

---

注意：不要使用

d

作为

chartGenerator

函数中数据的参数。在D3代码中，

d

通常用于匿名函数中的第一个参数（数据）。使用

d

会增加一些混乱，特别是对于经验丰富的D3编码器。

您可以直接将属性设置为标签文本。这样试试

  var vehicleText = svgArea.append("g")
    .attr("id", "vehicle_" + d.vehicle); 

  vehicleText.append("text")
    .attr("class", "annotation")
    .attr("dx","4em")
    .attr("dy",height+20)
    .text( d.vehicle);

var行=[{
“车辆”：“福特F系列PU”，
“2016年3月”：65179，
“2017年3月”：72089，
“perc_change”：10.6
},
{
“车辆”：“雪佛兰Silverado PU”，
“2016年3月”：45009，
“2017年3月”：45280，
“perc_change”：0.6
},
{
“车辆”：“道奇Ram PU”，
“2016年3月”：34152，
“2017年3月”：36885，
“perc_change”：8
},
{
“车辆”：“丰田凯美瑞”，
“2016年3月”：30942，
“2017年3月”：28189，
“perc_change”：-8.9
},
{
“车辆”：“丰田RAV4”，
“2016年3月”：27376，
“2017年3月”：28116，
“perc_change”：2.7
},
{
“车辆”：“本田雅阁”，
“2016年3月”：25571，
“2017年3月”：27182，
“perc_change”：6.3
},
{
“车辆”：“丰田花冠/矩阵”，
“2016年3月”：24183，
“2017年3月”：26747，
“perc_change”：10.6
},
{
“车辆”：“日产流氓”，
“2016年3月”：22566，
“2017年3月”：26629，
“perc_change”：18
},
{
“车辆”：“本田CR-V”，
“2016年3月”：25939，
“2017年3月”：25758，
“perc_change”：-0.7
},
{
“车辆”：“本田思域”，
“2016年3月”：25052，
“2017年3月”：25303，
“perc_change”：1
},
{
“车辆”：“福特逃生车”，
“2016年3月”：20806，
“2017年3月”：23012，
“perc_change”：10.6
},
{
“车辆”：“雪佛兰Equinox”，
“2016年3月”：19636，
“2017年3月”：21600，
“perc_change”：10
},
{
“车辆”：“丰田高原车”，
“2016年3月”：12742，
“2017年3月”：21241，
“perc_change”：66.7
},
{
“车辆”：“日产Altima”，
“2016年3月”：20573，
“2017年3月”：2003年9月，
“perc_change”：-2.6
},
{
“车辆”：“福特探索者”，
“2016年3月”：16690，
“2017年3月”：19628，
“perc_change”：17.6
},
{
“车辆”：“GMC Sierra PU”，
“2016年3月”：16520，
“2017年3月”：18900，
“perc_change”：14.4
},
{
“车辆”：“雪佛兰马里布”，
“2016年3月”：10813，
“2017年3月”：18577，
“perc_change”：71.8
},
{
“车辆”：“斯巴鲁内陆”，
“2016年3月”：13075，
“2017年3月”：17769，
“perc_change”：35.9
},
{
“车辆”：“福特Fusion”，
“2016年3月”：19446，
“2017年3月”：17560，
“perc_change”：-9.7
},
{
“车辆”：“吉普大切诺基”，
“2016年3月”：17653，
“2017年3月”：17230，
“perc_change”：-2.4
}
];
//代码在这里
//设置边距
var保证金={
前20名，
右:20,，
底数：20，
左：20
}
//设置宽度和高度
变量宽度=300-margin.left-margin.right，
高度=300-margin.top-margin.bottom；
年份=[“2016年3月”、“2017年3月”]
//范围
var xVehicles=d3.scaleBand（）.rangeRound（[0，宽度]，.1）.填充器（0.1）；
var xYears=d3.scaleBand（）.domain（yearVals）.range（[0，xVehicles.bandwidth（）]））
.paddingner（.1）
.填塞器（5.0）；
var yScale=d3.scaleLinear（）.domain（[085000]）.range（[height，0]）；
var colorScale=d3.scaleOrdinal（）
.范围（[“#87ceeb”、“#00bff”]）；
rows.forEach（函数（数据）{
图表生成器（数据）
})
d3.选择全部（“svg.barSvg”）
.数据（行）
.输入（）
.append（“文本”）
.文本（功能（d）{
返回d.车辆；
})
函数图生成器（d）{
d、 sales=yearVals.map（函数（年））{
返回{
“车辆”：d.车辆，
年份:年份,，
值：+d[年]
}
})
//创建车辆名称
无功车辆