Click to color a bar in bar chart, but it colors the bar partially in JS D3 V4

[David Tovmasyan]

I have a bar chart that looks fine, but when I try to color it on click, the majority of the bars only get colored partially and I can't seem to figure out why.

Here's my js code:

var margin = {top: 20, right: 20, bottom: 70, left: 75}, width = 600 - margin.left - margin.right, height = 300 - margin.top - margin.bottom; 

var x = d3.scaleBand() .rangeRound([0, width]) .padding(0.1); 

var y = d3.scaleLinear().range([height, 0]); 

var xAxis = d3.axisBottom() .scale(x); 

var yAxis = d3.axisLeft() .scale(y) .ticks(10); 

d3.csv("numeric_oil_spill.csv", function(error, data) { 

 d3.select("svg").remove(); 

var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

 data.forEach(function(d) { d.YEAR = +d.YEAR; d.TEMP_FAR = +d.TEMP_FAR; });

 x.domain(data.map(function(d) { return d.YEAR; }));

 y.domain([0, d3.max(data, function(d) { return +d.TEMP_FAR; })]);

 svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", "-.55em") .attr("transform", "rotate(-70)" );

 svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Value ($)"); 

 svg.selectAll("bar") .data(data) .enter().append("rect") .style("fill", "steelblue") .attr("x", function(d) { return x(d.YEAR); }) .attr("y", function(d) { return y(d.TEMP_FAR); }) .attr("width", x.bandwidth()) .attr("height", function(d) { return height - y(d.TEMP_FAR); }) .on("click", function (d) { d3.selectAll('.allbars').style('fill', '#2296F3'); //fill all circles black d3.select(this).style("fill", "#012B4E"); //then fill this circle lightcoral } ) 

 });

Would really appreciate some help, have been stuck on this for days!

Attached my data snapshot, and what the problem looks like.

[Sergej Matt Rinc]

Do post a working example on jsFiddle or codePen (or other site).

On the first glance I don't see in your code where do you set .attr("class", "allbars") for your bars.

When you don't set a style to the D3.js element then selecting all elements with this style will return nothing (empty set).

V V sob., 12. nov. 2022 ob 18:23 je oseba 'David Tovmasyan' via dc-js user group <dc-js-us...@googlegroups.com> napisala:

--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/ee9f39d9-c099-43fa-8a4b-a9763ff58f66n%40googlegroups.com.

[Gordon Woodhull]

This looks more like a d3 question than a dc.js question; you might try that list instead.

It is not possible to have two-tone rects like this using svg, so most likely you are overplotting two sets of bars.