{"id":1287,"date":"2015-05-22T09:23:16","date_gmt":"2015-05-22T01:23:16","guid":{"rendered":"http:\/\/www.daliane.com\/?p=1287"},"modified":"2015-05-22T09:23:16","modified_gmt":"2015-05-22T01:23:16","slug":"tu_jie_d3js_zhong_de_tickpaddinginnerticksizeouterticksize","status":"publish","type":"post","link":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/tu_jie_d3js_zhong_de_tickpaddinginnerticksizeouterticksize\/","title":{"rendered":"\u56fe\u89e3d3js\u4e2d\u7684tickPadding\uff0cinnerTickSize\uff0couterTickSize"},"content":{"rendered":"<pre><code class=\"html xml\"><span class=\"doctype\">&lt;!doctype html&gt;<\/span>\r\n<span class=\"tag\">&lt;<span class=\"title\">html<\/span> <span class=\"attribute\">lang<\/span>=<span class=\"value\">\"ja\"<\/span>&gt;<\/span>\r\n<span class=\"tag\">&lt;<span class=\"title\">head<\/span>&gt;<\/span>\r\n  <span class=\"tag\">&lt;<span class=\"title\">meta<\/span> <span class=\"attribute\">charset<\/span>=<span class=\"value\">\"UTF-8\"<\/span>&gt;<\/span>\r\n  <span class=\"tag\">&lt;<span class=\"title\">title<\/span>&gt;<\/span>Line Chart<span class=\"tag\">&lt;\/<span class=\"title\">title<\/span>&gt;<\/span>\r\n<span class=\"tag\">&lt;<span class=\"title\">style<\/span>&gt;<\/span><span class=\"css\">\r\n\r\n  <span class=\"class\">.axis<\/span> <span class=\"tag\">path<\/span>,\r\n  <span class=\"class\">.axis<\/span> <span class=\"tag\">line<\/span><span class=\"rules\">{\r\n    <span class=\"rule\"><span class=\"attribute\">fill<\/span>:<span class=\"value\"> none<\/span>;<\/span>\r\n    <span class=\"rule\"><span class=\"attribute\">stroke<\/span>:<span class=\"value\"> black<\/span>;<\/span>\r\n  <span class=\"rule\">}<\/span><\/span>\r\n\r\n  <span class=\"class\">.line<\/span><span class=\"rules\">{\r\n    <span class=\"rule\"><span class=\"attribute\">fill<\/span>:<span class=\"value\"> none<\/span>;<\/span>\r\n    <span class=\"rule\"><span class=\"attribute\">stroke<\/span>:<span class=\"value\"> blue<\/span>;<\/span>\r\n    <span class=\"rule\"><span class=\"attribute\">stroke-width<\/span>:<span class=\"value\"> <span class=\"number\">2<\/span>px<\/span>;<\/span>\r\n  <span class=\"rule\">}<\/span><\/span>\r\n\r\n  <span class=\"class\">.tick<\/span> <span class=\"tag\">text<\/span><span class=\"rules\">{\r\n    <span class=\"rule\"><span class=\"attribute\">font-size<\/span>:<span class=\"value\"> <span class=\"number\">12<\/span>px<\/span>;<\/span>\r\n  <span class=\"rule\">}<\/span><\/span>\r\n\r\n  <span class=\"class\">.tick<\/span> <span class=\"tag\">line<\/span><span class=\"rules\">{\r\n    <span class=\"rule\"><span class=\"attribute\">opacity<\/span>:<span class=\"value\"> <span class=\"number\">0.2<\/span><\/span>;<\/span>\r\n  <span class=\"rule\">}<\/span><\/span>\r\n\r\n<\/span><span class=\"tag\">&lt;\/<span class=\"title\">style<\/span>&gt;<\/span>\r\n<span class=\"tag\">&lt;\/<span class=\"title\">head<\/span>&gt;<\/span>\r\n<span class=\"tag\">&lt;<span class=\"title\">body<\/span>&gt;<\/span>\r\n<span class=\"tag\">&lt;<span class=\"title\">script<\/span> <span class=\"attribute\">src<\/span>=<span class=\"value\">\"http:\/\/d3js.org\/d3.v3.js\"<\/span>&gt;<\/span><span class=\"tag\">&lt;\/<span class=\"title\">script<\/span>&gt;<\/span>\r\n<span class=\"tag\">&lt;<span class=\"title\">script<\/span>&gt;<\/span><span class=\"javascript\">\r\n<a href=\"http:\/\/www.daliane.com\/wp-content\/uploads\/2015\/05\/pic20140419-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-1288\" src=\"http:\/\/www.daliane.com\/wp-content\/uploads\/2015\/05\/pic20140419-1-300x75.jpg\" alt=\"pic20140419-1\" width=\"300\" height=\"75\" srcset=\"http:\/\/www.daliane.com\/wp-content\/uploads\/2015\/05\/pic20140419-1-300x75.jpg 300w, http:\/\/www.daliane.com\/wp-content\/uploads\/2015\/05\/pic20140419-1.jpg 916w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<span class=\"keyword\">var<\/span> margin = {top: <span class=\"number\">20<\/span>, right: <span class=\"number\">100<\/span>, bottom: <span class=\"number\">30<\/span>, left: <span class=\"number\">100<\/span>},\r\n    width = <span class=\"number\">960<\/span> - margin.left - margin.right,\r\n    height = <span class=\"number\">500<\/span> - margin.top - margin.bottom;\r\n\r\n<span class=\"keyword\">var<\/span> dataset = [\r\n  {x: <span class=\"number\">0<\/span>, y: <span class=\"number\">5<\/span>},\r\n  {x: <span class=\"number\">1<\/span>, y: <span class=\"number\">8<\/span>},\r\n  {x: <span class=\"number\">2<\/span>, y: <span class=\"number\">13<\/span>},\r\n  {x: <span class=\"number\">3<\/span>, y: <span class=\"number\">12<\/span>},\r\n  {x: <span class=\"number\">4<\/span>, y: <span class=\"number\">16<\/span>},\r\n  {x: <span class=\"number\">5<\/span>, y: <span class=\"number\">21<\/span>},\r\n  {x: <span class=\"number\">6<\/span>, y: <span class=\"number\">18<\/span>},\r\n  {x: <span class=\"number\">7<\/span>, y: <span class=\"number\">23<\/span>},\r\n  {x: <span class=\"number\">8<\/span>, y: <span class=\"number\">24<\/span>},\r\n  {x: <span class=\"number\">9<\/span>, y: <span class=\"number\">28<\/span>},\r\n  {x: <span class=\"number\">10<\/span>, y: <span class=\"number\">35<\/span>},\r\n  {x: <span class=\"number\">11<\/span>, y: <span class=\"number\">30<\/span>},\r\n  {x: <span class=\"number\">12<\/span>, y: <span class=\"number\">32<\/span>},\r\n  {x: <span class=\"number\">13<\/span>, y: <span class=\"number\">36<\/span>},\r\n  {x: <span class=\"number\">14<\/span>, y: <span class=\"number\">40<\/span>},\r\n  {x: <span class=\"number\">15<\/span>, y: <span class=\"number\">38<\/span>},\r\n];\r\n\r\n<span class=\"keyword\">var<\/span> xScale = d3.scale.linear()\r\n    .domain([<span class=\"number\">0<\/span>, d3.max(dataset, <span class=\"function\"><span class=\"keyword\">function<\/span><span class=\"params\">(d)<\/span>{<\/span> <span class=\"keyword\">return<\/span> d.x; })])\r\n    .range([<span class=\"number\">0<\/span>, width]);\r\n\r\n<span class=\"keyword\">var<\/span> yScale = d3.scale.linear()\r\n    .domain([<span class=\"number\">0<\/span>, d3.max(dataset, <span class=\"function\"><span class=\"keyword\">function<\/span><span class=\"params\">(d)<\/span>{<\/span> <span class=\"keyword\">return<\/span> d.y; })])\r\n    .range([height, <span class=\"number\">0<\/span>]);\r\n\r\n<span class=\"keyword\">var<\/span> xAxis = d3.svg.axis()\r\n    .scale(xScale)\r\n    .orient(<span class=\"string\">\"bottom\"<\/span>)\r\n    .innerTickSize(-height)\r\n    .outerTickSize(<span class=\"number\">0<\/span>)\r\n    .tickPadding(<span class=\"number\">10<\/span>);\r\n\r\n<span class=\"keyword\">var<\/span> yAxis = d3.svg.axis()\r\n    .scale(yScale)\r\n    .orient(<span class=\"string\">\"left\"<\/span>)\r\n    .innerTickSize(-width)\r\n    .outerTickSize(<span class=\"number\">0<\/span>)\r\n    .tickPadding(<span class=\"number\">10<\/span>);\r\n\r\n<span class=\"keyword\">var<\/span> line = d3.svg.line()\r\n    .x(<span class=\"function\"><span class=\"keyword\">function<\/span><span class=\"params\">(d)<\/span> {<\/span> <span class=\"keyword\">return<\/span> xScale(d.x); })\r\n    .y(<span class=\"function\"><span class=\"keyword\">function<\/span><span class=\"params\">(d)<\/span> {<\/span> <span class=\"keyword\">return<\/span> yScale(d.y); });\r\n\r\n<span class=\"keyword\">var<\/span> svg = d3.select(<span class=\"string\">\"body\"<\/span>).append(<span class=\"string\">\"svg\"<\/span>)\r\n    .attr(<span class=\"string\">\"width\"<\/span>, width + margin.left + margin.right)\r\n    .attr(<span class=\"string\">\"height\"<\/span>, height + margin.top + margin.bottom)\r\n  .append(<span class=\"string\">\"g\"<\/span>)\r\n    .attr(<span class=\"string\">\"transform\"<\/span>, <span class=\"string\">\"translate(\"<\/span> + margin.left + <span class=\"string\">\",\"<\/span> + margin.top + <span class=\"string\">\")\"<\/span>);\r\n\r\n  svg.append(<span class=\"string\">\"g\"<\/span>)\r\n      .attr(<span class=\"string\">\"class\"<\/span>, <span class=\"string\">\"x axis\"<\/span>)\r\n      .attr(<span class=\"string\">\"transform\"<\/span>, <span class=\"string\">\"translate(0,\"<\/span> + height + <span class=\"string\">\")\"<\/span>)\r\n      .call(xAxis)\r\n\r\n  svg.append(<span class=\"string\">\"g\"<\/span>)\r\n      .attr(<span class=\"string\">\"class\"<\/span>, <span class=\"string\">\"y axis\"<\/span>)\r\n      .call(yAxis)\r\n\r\n  svg.append(<span class=\"string\">\"path\"<\/span>)\r\n      .data([dataset])\r\n      .attr(<span class=\"string\">\"class\"<\/span>, <span class=\"string\">\"line\"<\/span>)\r\n      .attr(<span class=\"string\">\"d\"<\/span>, line);\r\n\r\n<\/span><span class=\"tag\">&lt;\/<span class=\"title\">script<\/span>&gt;<\/span>\r\n<span class=\"tag\">&lt;\/<span class=\"title\">body<\/span>&gt;<\/span>\r\n<span class=\"tag\">&lt;\/<span class=\"title\">html<\/span>&gt;<\/span><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>&lt;!doctype html&gt; &lt;html lang=&#8221;ja&#8221;&gt; &lt;head&#038;g&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1288,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[38],"tags":[55,233],"_links":{"self":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/1287"}],"collection":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/comments?post=1287"}],"version-history":[{"count":1,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/1287\/revisions"}],"predecessor-version":[{"id":1289,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/1287\/revisions\/1289"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/media\/1288"}],"wp:attachment":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/media?parent=1287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/categories?post=1287"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/tags?post=1287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}