Home > Developer > Web Develop
My personal blog is: www.ourd3js.com
The csdn blog is blog.csdn.net/lzhlzz.
Please indicate the source for reprinting. Thank you.
In section 3rd, an icon is created, but a corresponding coordinate axis is not added for it, so you do not know how long each column is. Create an axis for this section.The axes in D3 all appear in the form of svg graphs, which is why the svg method is used for column embedding in section 3rd. In section 4th, we explain the usage of scale, which also needs to be used for the coordinate axis. In section 4th, we mentioned that scale is a function, and the coordinate axis in this section is also a function, but its usage is a little different. Note that.
The following code defines the data, scale (proportion), and coordinate axis respectively:
var dataset = [ 30 , 20 , 45 , 12 , 21 ];var xScale = d3.scale.linear().domain([0,d3.max(dataset)]).range([0,500]);var axis = d3.svg.axis().scale(xScale).orient("bottom");1-4 rows define the data and scale (proportion). For details about the proportion, see the previous section.
5-7 is the definition axis:
svg.append("g").call(axis);Add a g in svg. g is an attribute in svg. It indicates a group of things, such as lines, rects, circles actually consists of these axes. A call function is also called, which is important. In D3, call is equivalent to defining a function, and then giving the selected element to it, that is, equivalent to the following code:
function foo(selection) { selection .attr("name1", "value1") .attr("name2", "value2");}foo(d3.selectAll("div"))This code is equivalent:
d3.selectAll("div").call(foo);Therefore, svg. append ("g"). call (axis) is equivalent to passing the selected g element to the axis function. After the call, the coordinate axes are displayed in the corresponding svg.
svg.append("g").attr("class","axis").attr("transform","translate(10,160)").call(axis);The complete code is as follows:
<Style>. axis path ,. axis line {fill: none; stroke: black; shape-rendering: cripedges ;}. axis text {font-family: sans-serif; font-size: 11px ;} </style> <body> <script src = "http://d3js.org/d3.v3.min.js" charset = "UTF-8"> </script> <script> var width = 600; var height = 600; var dataset = [30, 20, 45, 12, 21]; var svg = d3.select ("body "). append ("svg "). attr ("width", width ). attr ("height", height); var xScale = d3.scale. linear (). domain ([0, d3.max (dataset)]). range ([0,500]); var axis = d3.svg. axis (). scale (xScale ). orient ("bottom"); svg. append ("g "). attr ("class", "axis "). attr ("transform", "translate (10,160 )"). call (axis); svg. selectAll ("rect "). data (dataset ). enter (). append ("rect "). attr ("x", 10 ). attr ("y", function (d, I) {return I * 30 ;}). attr ("width", xScale) // note this. attr ("height", 28 ). attr ("fill", "red"); </script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
