更改d3条形图的“填充”

Posted 2021-03-30

我在Laravel学习D3并试图使用这个颜色选择按钮：

<input type="color">

...在此链接更新d3条形图的填充：（https://bl.ocks.org/mbostock/3885304）

我尝试了很多解决方案，包括使用css对象和答案：（Input type color styling）

我将整个图表加载到页面上，但颜色选择按钮可以更改颜色，就像在另一个链接问题的答案中一样，不会更新图形的填充。为了澄清，我肯定会更新“填充”而不是“颜色”。我是D3和js的新手，但不是html和css。可以通过添加以下行来设置颜色，例如：

.attr("fill", "green");

...到代码的末尾，但我想看看如何通过从“输入类型”按钮中选择颜色来更改图形的条形填充。

答案

为更改事件的输入添加侦听器。在更改时，选择所有条形，然后将填充设置为新颜色。

d3.select("input")
  .on("change", function() {
    g.selectAll(".bar")
      .style("fill", d3.select(this).property("value"))
  });