时间戳

首页 > 解决方案 > 更改 d3 条形图的“填充”

d3.js - 更改 d3 条形图的“填充”

问题描述

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

<input type="color">

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

我尝试了许多解决方案，包括使用 css 对象和这里的答案：（输入类型颜色样式）

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

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

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

标签： d3.js

解决方案

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

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

推荐阅读