Question

我正在使用Data-Driven Documents (D3.js)库来绘制一个条形图。它工作正常。现在我需要在用户点击它时更改条形图的颜色。但它不起作用。你能说出来吗我为什么？

注意：当我使用D3.selectAll(".interval").style("fill", "#F96845");时，它会更改所有条形图的颜色。但我只需要更改所点击的颜色。

for (var i = 0; i < this.data.length; i++) {
        var item = this.data[i];
        this.svg.append("rect")
            .attr("class", "interval")
            .attr("y", offset + item['start'] * max_height / 86400)
            .attr("x", horz_inset)
            .attr("height", item['length'] * max_height / 86400)
            .attr("width", width - 2 * horz_inset)
            .on("click", () => {
              D3.select(".interval").style("fill", "#F96845");//here it is not working?
        });
    }

Answer 1

任何经验丰富的D3编码器都会简单地说：＆＃34;放弃箭头功能并使用double num1; double num2; double num3 double percentnum1; double percentnum2; double percentnum3; double totalscore;和常规功能＆＃34; ，这是正确的建议。但是，此问题应该与您的previous one相关联，并明确说明您有理由使用箭头功能。

因此，您真正的问题是：如何在箭头函数中引用this引用DOM元素？

解决方案是：使用第二个和第三个参数的组合在箭头函数中获取this DOM元素：

this

要阅读有关在箭头函数中获取.on("click", (d, i, n) => { d3.select(n[i]).style("fill", "#F96845"); }); DOM元素的更多信息，请查看此示例：d3 v4 retrieve drag DOM target from drag callback when `this` is not available

编辑：如果要更改单击元素的样式并还原先前单击的元素的样式，则可以在使用单击样式中的样式之前使用this将样式应用于所有元素，或者，您可以将样式同时应用于所有元素，包括单击的元素：

＆＃13;

selectAll

＆＃13;

var circles = d3.select("svg").selectAll("foo")
  .data(d3.range(10))
  .enter()
  .append("circle")
  .style("fill", "firebrick")
  .attr("cy", 50)
  .attr("cx", d => 20 + d * 30)
  .attr("r", 10);

circles.on("click", (d, i, n) => {
  circles.style("fill", (e, j) => n[i] === n[j] ? "lime" : "firebrick")
})

＆＃13;

单击时，数据驱动文档（D3.js）会更改颜色

1 个答案: