选择"this"的子元素以更新属性

Question

我的初始数组包含构建箱线图所需的季度数据，由ProspRating分面。 我根据第一季度的数据创建了多个复杂的g对象（每个ProspRating一个）。 每个g封装简单的箱线图元素 - 线条，矩形等）

为了创建对象，我使用了以下代码（仅摘录了一个简单的箱形图元素（line.range）：

d3.select("svg").selectAll("g.box")
.data(data10Q1)
.enter()
.append("g")
.attr("class", "box")
.attr("transform", function(d) {return "translate(" + xScale(d.ProspRating) +"," + yScale(d.v_mdn) + ")"})
.each(function(d,i) {
d3.select(this)
.append('line')
.attr("class", "range")
.attr("x1", 0)
.attr("x2", 0)
.attr("y1", yScale(d.v_max) - yScale(d.v_mdn))
.attr("y2", yScale(d.v_min) - yScale(d.v_mdn))
.style("stroke", "black")
.style("stroke-width", "4px");

基于代码的初始箱线图效果很好。 目前正在尝试编写一个函数来根据另一个季度的数据更新元素属性。

代码摘录（仅适用于一个箱线图的元素（line.range））：

function update (quarter) {
var filtered = data.filter(function(d) {
  return d.quarter === quarter})

var boxes = d3.select("svg").selectAll("g.box")
 .data(filtered, function(d){return d.ProspRating})
  .attr("transform", function(d) {return "translate(" + xScale(d.ProspRating) +"," + yScale(d.v_mdn) + ")"})
  .each(function(d,i) {
    d3.select(this)
    .select("line.range")
    .attr("y1", yScale(d.v_max) - yScale(d.v_mdn))
    .attr("y2", yScale(d.v_min) - yScale(d.v_mdn))

看起来d3.select（this）.select（"line.range"）无法正常工作。 访问 line.range 和其他类似元素以更新其属性的最佳方式是什么？

Answer 1

我猜你在var boxes = d3.select [...] .data [...]之后错过了.enter()