I have two dataset d1 and d2 as follows:
const d1 = [
{group: "H", value: 6},
{group: "I", value: 2},
{group: "M", value: 3}
];
const d2 = [
{group: "H", value: 1},
{group: "I", value: 12},
{group: "M", value: 2}
];
and a function called makethisgraph where the "data" that is sent is either d1 and d2 based on a button I click. In this function, based on the data I select, the bars change to match the values. I want to make it in such a manner that if I select d1 then the color of the bar changes to red and if d2 then it turns to green
function makethisgraph(data) {
var u = svg.selectAll("rect")
.data(data)
u .enter()
.append("rect")
.merge(u)
.transition()
.duration(1000)
.attr("x", function(d) { return x(d.group); })
.attr("y", function(d) { return y(d.value); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.value); })
.attr("fill", function(d, i) {
// if ( data = d1)
// {
// return "red"
// }
// else
// {
// return "green"
// }
return "blue"
});
I tried writing if the data I got is d1 then it will be red but it doesn't work. Is there any other way to solve this?
Add a color parameter to makethisgraph:
function makethisgraph(data, color) {
...
u.enter()
...
.attr("fill", color);
}
...
makethisgraph(d1, 'red');
makethisgraph(d2, 'green');