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

Source: Internet
Author: User

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--

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.