Javascript d3-当setAttribute（）起作用但.attr不起作用时'；T

我很困惑，为什么设置元素属性的d3方法（在这段代码中）失败了，而传统的JS方法却有效。（我试图在用户单击HTML按钮更改绘制的数据时更新chloroleth颜色，所有这些都来自同一个JSON。）

HTML很简单：

<div id="buttons">
    <button id="party">Parties</button>
    <button id="tenure">Tenure</button>
</div>

//此行有以下错误：

this.attr("style", "fill: " + t_scale(getJSDateFromExcel(d.In_Office_Full_Date).getFullYear()));

//。。。但这句话很管用：

this.setAttribute("style", "fill: " + t_scale(getJSDateFromExcel(d.In_Office_Full_Date).getFullYear()));

            }
            else
                this.setAttribute("style", "fill: #111");   // Neutral colour
            });
            break;
        default:
            console.log("Unknown event trigger in redraw()");
        }
    }
}

var t_scale = d3.scale.linear()
  .domain([1973,2013])
  .range(['red','white']);


d3.select("body").selectAll("#buttons button")
        .on("click",plot.redraw);

---

我希望你能帮忙

问题在于从

每个（函数（d，i）{…}）

中调用

this

方法的方式

您的方向是正确的：

此

引用您正在修改的普通html元素。但是，您希望调用的

attr

函数是一种d3选择方法，而不是html元素。因此，您需要将此包装在d3选择中：

paths.each(function(d,i) {
  d3.select(this)
    .attr("class","");
});

调用

setAttribute

是有效的，因为它是纯html元素的一种方法，但显然d3的

attr

更健壮

但话虽如此，实现目标的更惯用方法是：

paths
  .attr("class", "")
  .style("fill", function(d, i) {
    if (d.In_Office_Full_Date) {
      return t_scale(getJSDateFromExcel(d.In_Office_Full_Date).getFullYear());
    }
    return "#111";
  });

---

天才！谢谢这看起来更像通常优雅的d3模式，它的作品。

paths
  .attr("class", "")
  .style("fill", function(d, i) {
    if (d.In_Office_Full_Date) {
      return t_scale(getJSDateFromExcel(d.In_Office_Full_Date).getFullYear());
    }
    return "#111";
  });