javascript - How to get striped grey background resembling 100% to the barchart? -
This is a follow up question
How can I get a gray gray scale in the background which represents 100% And parallel to the Y-axis?
Code:
var data = [{"age": "less than 18 years" "582.13", "color": "# B3DA29"}, {"age": "18 - 22 "," value ":" 583.98 "," color ":" # 78C0F2 "}, {" age ":" 35 - 60 "," value ":" 607.70 "," color ":" # E54C3C "}, {"Age": "60 - up", "value": "610.00", "color": "# F2519D"}]; Var margin = {top: 20, right: 20, bottom: 30, on the left: 40}, width = 400 - margin. Left - margin. Right, height = 400 - margin.Top - margin.bottom; Var x = d3.scale.ordinal () .rangeRoundBands ([0, width], .1); Var y = d3.scale.linear () .ange ([height, 0]); Var xAxis = d3.svg.axis () .scale (x) .orient ("bottom"); Var yAxis = d3.svg.axis () .scale (y) .orient ("left"). Ticks (10, "%"); Var svg = d3.select ("body"). Attached ("svg") .attr ("width", width + margin.left + margin.right) .attr ("height", height + margin.top + margin below). Append ("g") .attr ("conversion", "translation (" + margin. Left + "," + margin.Top + ")"); X.domain (data.map (function (d) {return dja;}); Y.domain ([0, d3.max (data, function (d) {return d.value;}))); Svg.append ("g") .attr ("class", "x axis") .attr ("transform", "translate (0," + height + ")"). Call (xAxis); Var tooltip = D.seselect ("body"). Append ("div") .attr ("class", "tooltip"). Style ("opacity", 0); Svg.selectAll (". Bar"). Data (data) center (). Attached ("rect") .attr ("class", "bar") .attr ("x", function (d) {return x (dag);}) .attr ("width", x.rangeBand ()) .attr ("y", function (d) {return y (d.value);}) .attr ("height", function (d) {return height - y (d. Value);}). Style ("fill", function (d) {return d. colore;}) .attr ("rx", 10) .attr ("ry", 10) .on ("mouseover", function (d) {tooltip. Style ("left", (D3.Event.pagex) + "PX", "Transition" ("200") style ("Opacity", 9); Tooltip. Html ("Count:" + D. Value) Style ("Top", (D3Event.Pagvee -28) + "PX");}) .on ("Mouseout", "Function (D) {tooltip.transition () .Duration (500) Style ("Opacity", 0);});
How it works here .
Renewed.
svg.selectAll ("backgound-bar"). (Data) .enter () .append ("rect") .attr ("class", "background-bar") .attr ("x", function (d) {return x (dag);}) .attr ("Width", x.rangeBand ()) .attr ("y", function (d) {return y (800);}) .attr ("ry", 10) .attr ("ry", 10) < element and x and with a class background-time . > Y remains the same as you've defined before. But the height of the bar is given to the define variable height . Hope it helps :)
Comments
Post a Comment