CODEWITHSUNDEEP
d3.js
agileOne
agileOne

Reputation: 107

Change "fill" of d3 bar graph

I'm learning D3 in Laravel and trying to use this color picking button:

<input type="color">

...to update the fill of the d3 bar chart at this link: (https://bl.ocks.org/mbostock/3885304)

I have tried numerous solutions, including working with css objects and the answer here: (Input type color styling)

I get the whole chart loaded on a page but the color picking button, which can change colors like in the answer on the other linked question, doesn't update the graph's fill. To clarify, I was sure to update "fill" and not "color". I'm new to D3 and js but not html and css. Color can be set by adding a line of the following, for example:

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

... to the end of the code, but I want to see how to change the graph's bar fill by picking a color from the "input type" button.

Upvotes: 1

Views: 791

Answers (1)

DWal
DWal

Reputation: 2762

Add a listener to the input for a change event. On a change, select all the bars, then set the fill to the new color.

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

Upvotes: 1

Related Questions