Summary of issues arising from adding events to a column chart d3.js--

First make a dynamic column chart (the version of D3.js used here is V3, some functions will change with V4)

：

Code:

<! DOCTYPE html>. Axis path,. Axis line{Fill:none;            Stroke:black; Shape-rendering:crispedges; }. Axis text {font-family:sans-serif; Font-size:11px; }        .            MyText {fill:white; Text-Anchor:middle; }    </style>//add an SVG canvas    varwidth=400; varheight=400; //Add an SVG canvas to the body    varSVG = D3.select ("Body"). Append ("SVG"). attr ("Width", width). attr ("Height", height); //Blank space around the canvas    varpadding={left:30, right:30, Top:20, bottom:20    }; //define an array    vardataset=[10,20,30,40,33,24,12,5]; //scale of the x-axis    varxscale=d3.scale.ordinal ()//d3.scale.ordinal () is used to support the range sub-file. Unlike a quantitative scale (such as d3.scale.linear ()), which returns continuous range values, the ordinal scale uses a discrete range value, which means that the output value is determined beforehand.     //You can use range () when you map a range, or you can use Rangebands (). The latter receives a minimum and a maximum value, and then automatically splits it into equal blocks or "stalls" based on the length of the input range. 0.2 that is, the gear spacing is 20% of the width of each file. . Domain (D3.range (dataset.length)). Rangeroundbands ([0,width-padding.left-Padding.right]); //the scale of the y-axis    varYscale =d3.scale.linear (). Domain ([0, D3.max (DataSet)]) . Range ([Height-padding.top-padding.bottom,0]); //Defining Axes    //defining the X-axis    varXaxis =D3.svg.axis (). Scale (XScale). Orient ("Bottom"); //Defining the Y-axis    varYAxis =D3.svg.axis (). Scale (Yscale). Orient ("Left"); //adding rectangles and text elements    varrectpadding = 4; varRects = Svg.selectall (". Myrect "). Data (DataSet). Enter (). Append ("Rect"). attr ("Class", "Myrect"). attr ("Transform", "Translate (" +padding.left+ "," +padding.top+ ")"). attr ("X",function(d,i) {returnXScale (i) +RECTPADDING/2;}). attr ("Width", Xscale.rangeband ()-rectpadding). attr ("Y",function(d) {varmin = Yscale.domain () [0]; returnyscale (min); }). attr ("Height",function(d) {return0; }). Transition (). Delay (function(d,i) {returnI * 200; }). Duration (2000). Ease ("Bounce"). attr ("Y",function(d) {returnYscale (d); }). attr ("Height",function(d) {returnheight-padding.top-padding.bottom-Yscale (d); })//Console.log (width-padding.left-padding.right);    //Adding text elements    varTexts = Svg.selectall (". MyText "). Data (DataSet). Enter (). Append ("Text"). attr ("Class", "MyText"). attr ("Transform", "Translate (" +padding.left+ "," +padding.top+ ")"). attr ("X",function(d,i) {returnXScale (i) +RECTPADDING/2;}). attr ("Y",function(d) {varmin = Yscale.domain () [0]; //Console.log (Yscale (min));            returnyscale (min); }). Transition (). Delay (function(d,i) {returni*200; }). Duration (2000). Ease ("Bounce"). attr ("Y",function(d) {returnYscale (d); }). attr ("DX",function(){            return(Xscale.rangeband ()-rectpadding)/2;}). attr ("Dy",function(){            return20; }). Text (function(d) {returnD;    }); //Add an axis element    //Add x AxisSvg.append ("G"). attr ("Class", "axis"). attr ("Transform", "Translate (" +padding.left+ "," + (Height-padding.bottom) + ")"). Call (Xaxis); //Add y-axisSvg.append ("G"). attr ("Class", "axis"). attr ("Transform", "Translate (" +padding.left+ "," +padding.top+ ")"). Call (YAxis);</script></body>
Now add the mouseover and mouseout events like this dynamic column chart.
Practice:
1. Remove the style from the style. MyText class that adds a color attribute directly when adding a rectangle
2. Add an event when adding a rectangle
...//adding rectangles and text elements    varrectpadding = 4; varRects = Svg.selectall (". Myrect "). Data (DataSet). Enter (). Append ("Rect"). attr ("Class", "Myrect"). attr ("Transform", "Translate (" +padding.left+ "," +padding.top+ ")"). attr ("X",function(d,i) {returnXScale (i) +RECTPADDING/2;}). attr ("Width", Xscale.rangeband ()-rectpadding). attr ("Y",function(d) {varmin = Yscale.domain () [0]; returnyscale (min); }). attr ("Height",function(d) {return0; }). Transition (). Delay (function(d,i) {returnI * 200; }). Duration (2000). Ease ("Bounce"). attr ("Y",function(d) {returnYscale (d); }). attr ("Height",function(d) {returnheight-padding.top-padding.bottom-Yscale (d); }). attr ("Fill", "Steelblue")        //Add Event. On ("MouseOver",function(d,i) {D3.select ( This). attr ("Fill", "Yellow"); }). On ("Mouseout",function(d,i) {D3.select ( This). Transition (). Duration (500). attr ("Fill", "Steelblue"); });...
But this will cause an error, and it will show that on is not a function
then I knew I should put the on event before transition () , but why did you do that now?
 ...//adding rectangles and text elements    varrectpadding = 4; varRects = Svg.selectall (". Myrect "). Data (DataSet). Enter (). Append ("Rect"). attr ("Class", "Myrect"). attr ("Transform", "Translate (" +padding.left+ "," +padding.top+ ")"). attr ("X",function(d,i) {returnXScale (i) +RECTPADDING/2;}). attr ("Width", Xscale.rangeband ()-rectpadding)//add an event before transition (). On ("MouseOver",function(d,i) {D3.select ( This). attr ("Fill", "Yellow"); }). On ("Mouseout",function(d,i) {D3.select ( This). Transition (). Duration (500). attr ("Fill", "Steelblue"); }). attr ("Y",function(d) {varmin = Yscale.domain () [0]; returnyscale (min); }). attr ("Height",function(d) {return0; }). Transition (). Delay (function(d,i) {returnI * 200; }). Duration (2000). Ease ("Bounce"). attr ("Y",function(d) {returnYscale (d); }). attr ("Height",function(d) {returnheight-padding.top-padding.bottom-Yscale (d); }). attr ("Fill", "Steelblue");...
Eventually:
Here's a tutorial from the rectangle chart Source: http://d3.decembercafe.org/pages/lessons/9.html
Summary of issues arising from adding events to a column chart d3.js--