html5 - Adding custom backgrounds to D3.js bar graph -
i'm new d3.js , i'm building bar graph in d3.js.
i'm trying make background 3 different colors break x axis distinct 3 zones (low, medium, , high). figure should appending <g>elements i'm not sure how place them in case.
the site here:
not sure if providing more of code help
this answer based on josh suggested in comments thought i'd add code since had deal mouseover , created challenges too.
one thing worth mentioning there isn't z-index svgs have put new background shades in first , chart bars (which why have give rectangles bar chart new name, per josh's suggestion)
svg.append("rect") .attr("y", padding) .attr("x", padding) .attr("width", 200) .attr("height", h -padding*2) .attr("fill", "rgba(0,255,0, 0.3") .attr("class", "legendbar") svg.append("rect") .attr("y", padding) .attr("x", padding +200) .attr("width", 200) .attr("height", h -padding*2) .attr("fill", "rgba(0,0,255, 0.3") .attr("class", "legendbar") svg.append("rect") .attr("y", padding) .attr("x", padding +400) .attr("width", 200) .attr("height", h -padding*2) .attr("fill", "rgba(255,0,0, 0.3") .attr("class", "legendbar") svg.selectall("rect.bars") .data(dataset) .enter() .append("rect") .attr("class", "bars") .attr("x", 0 + padding) .attr("y", function(d, i){ return yscale(i); }) .attr("width", function(d) { return xscale(d.values[0]); }) .attr("height", yscale.rangeband()) .on("mouseover", function(d){ var yposition = parsefloat(d3.select(this).attr("y")) + yscale.rangeband() /2 var xposition = parsefloat(d3.select(this).attr("x")) /2 + w /2; d3.select("#tooltip") .style("left", "660px") .style("top", "140px") .select("#strat") .text(d.values[3]); d3.select("#tooltip") .select("#graph") .attr("src", "img/cpg.jpg"); d3.select("#tooltip") .select("#studentname") .text(d.name); d3.select("#tooltip").classed("hidden", false); }) .on("mouseout", function() { d3.select("#tooltip").classed("hidden", true); });
Comments
Post a Comment