CODEWITHSUNDEEP
javascriptcssd3.js
SkyWalker
SkyWalker

Reputation: 14307

d3js: How does the "magic" work with fill on hover for a barchart plot?

There are multiple versions of the D3 JS v3 barchart plot around that have the feature of changing the bar color when the mouse hovers over it. I have a minimal working barchart and wanted to add it but it doesn't change the bar fill color upon hovering over it.

Looking at this barchart example that is built on top of v3 I only see that the needed addendum is this css snippet:

.bar:hover {
  fill: orangered;
}

therefore I added this but I can't see the change of fill color on hovering ... where else does the magic come from?

UPDATE: This is my D3 JS barchart plot generating code:

// delete old
d3.select("#" + divId).select("svg").remove();

var margin = {top: 40, right: 20, bottom: 20, left: 20},
    width = 450 - margin.left - margin.right,
    height = 370 - margin.top - margin.bottom;

var max = d3.max(values);
var min = d3.min(values);
var x = d3.scale.linear()
    .domain([min, max])
    .range([0, width]);

// generate a histogram using twenty uniformly-spaced bins.
var data = d3.layout.histogram()
    .bins(x.ticks(10))
    (values);

var yMax = d3.max(data, function(d){ return d.length });
var yMin = d3.min(data, function(d){ return d.length });
var colorScale = d3.scale.linear()
    .domain([yMin, yMax])
    .range([d3.rgb(color).brighter(), d3.rgb(color).darker()]);

var y = d3.scale.linear()
    .domain([0, yMax])
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var svg = d3.select("#" + divId)
    .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 + ")");

var bar = svg.selectAll(".bar")
    .data(data)
    .enter()
    .append("g")
    .attr("class", "bar")
    .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });

bar.append("rect")
    .attr("x", 1)
    .attr("width", (x(data[0].dx) - x(0)) - 1)
    .attr("height", function(d) { return height - y(d.y); })
    .attr("fill", function(d) { return colorScale(d.y) });

bar.append("text")
    .attr("dy", ".75em")
    .attr("y", -12)
    .attr("x", (x(data[0].dx) - x(0)) / 2)
    .attr("text-anchor", "middle")
    .text(function(d) { return formatCount(d.y); });

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("text")
    .attr("x", 0)
    .attr("y", 0 - (margin.top / 2))
    .attr("text-anchor", "left")
    .classed("label", true)
    .text($scope.histogramData.spec[$scope.histogramData.selected]);

Upvotes: 1

Views: 613

Answers (1)

Sirko
Sirko

Reputation: 74076

In the example the class bar is assigned to the rectangles.

In your code, however, the class is assigned to <g> tags, which will not trigger on hover.

If you change the CSS to the following, it should work:

.bar rect:hover {
  fill: orangered;
}

Upvotes: 3

Related Questions