更改d3条形图的“填充”

Question

我正在Laravel中学习D3，并尝试使用此颜色选择按钮：

<input type="color">

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

我尝试了许多解决方案，包括使用CSS对象以及此处的答案： （Input type color styling）

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

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

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

Answer 1

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

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