{"id":8388,"date":"2018-11-12T17:46:05","date_gmt":"2018-11-12T08:46:05","guid":{"rendered":"http:\/\/r-dimension.xsrv.jp\/classes_j\/?p=8388"},"modified":"2022-10-17T14:01:32","modified_gmt":"2022-10-17T05:01:32","slug":"d3_div","status":"publish","type":"post","link":"https:\/\/r-dimension.xsrv.jp\/classes_j\/d3_div\/","title":{"rendered":"div\u8981\u7d20\u306e\u63cf\u753b"},"content":{"rendered":"\n

\u3053\u306e\u56de\u3067\u306f\u3001html\u306ediv\u8981\u7d20\uff08\uff09\u3092\u4f7f\u3063\u3066\u30c7\u30fc\u30bf\u3068\u95a2\u9023\u3065\u3051\u3066\u307f\u307e\u3059\u3002
div\u3068\u306f\u3001<div><\/div>\u306e\u3088\u3046\u306b\u8868\u8a18\u3055\u308c\u3001\u6307\u5b9a\u3055\u308c\u305f\u7bc4\u56f2\u3092\u30b0\u30eb\u30fc\u30d7\u5316\u3059\u308b\u6a5f\u80fd\u3092\u6301\u3063\u305f\u30bf\u30b0\u3067\u3059\u3002<\/p>\n\n\n\n

1. div\u306e\u4f7f\u7528<\/h2>\n\n\n\n

\u305d\u308c\u3067\u306f\u65e9\u901f\u4f7f\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002\u3053\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306f\u3001html\u306ebody\u5185\u306bdiv\u30bf\u30b0\u3092\u914d\u7f6e\u3057\u3001css\u3067\u5b9a\u7fa9\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n

\/\/01_1;\n\n\n  \n    <meta charset=\"utf-8\">\n    <title>01_1<\/title>\n    <script src=\"https:\/\/d3js.org\/d3.v7.min.js\"><\/script>\n    <style type=\"text\/css\">\n       div.bar{\n          display: inline-block;\n          width: 30px;\n          height: 100px;\n          background-color: blue;\n       }\n    <\/style>\n  \n  \n    <div class=\"bar\"><\/div>\n  \n<\/code><\/pre>\n\n\n\n

\u3059\u308b\u3068\u3001\u9752\u8272\u306e\u30d0\u30fc\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
2. d3\u3067div\u3092\u751f\u6210\u3059\u308b<\/h2>\n\n\n\n
\u6b21\u306b\u3001div\u8981\u7d20\u3092d3\u3067\u751f\u6210\u3057\u3066\u307f\u307e\u3059\u3002body\u306e\u4e2d\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u66f8\u304d\u63db\u3048\u3066\u307f\u307e\u3059\u3002d3\u306f\u3001div\u3092\u4f5c\u6210\u3057\u306a\u304a\u304b\u3064\u305d\u306ediv\u306bclass\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
var dataset = [10, 20, 30, 40, 50];\n\nd3.select(\"body\").selectAll(\"div\")   \/\/body\u3092\u9078\u629e\u3057\u3001\u5f8c\u307b\u3069\u751f\u6210\u3055\u308c\u308bdiv\u3092\u9078\u629e\n  .data(dataset)                    \/\/\u30c7\u30fc\u30bf\u8aad\u307f\u8fbc\u307f\n  .enter()                          \/\/\u8aad\u307f\u8fbc\u3093\u3060\u30c7\u30fc\u30bf\u3092\u5206\u6790\u3057\u3001\u6570\u3092\u78ba\u8a8d\n  .append(\"div\")                    \/\/div\u3092\u751f\u6210\n  .attr(\"class\", \"bar\");            \/\/\u751f\u6210\u3057\u305fdiv\u306bclass\u3092\u8a2d\u5b9a<\/code><\/pre>\n\n\n\n

\u7d50\u679c\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002\u305d\u308c\u305e\u308cdiv\u8981\u7d20\u304c5\u3064\u751f\u6210\u3055\u308c\u3066\u3044\u307e\u3059\u3002chrome\u306e\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u30c4\u30fc\u30eb\uff08\u30b3\u30de\u30f3\u30c9\uff0b\u30aa\u30d7\u30b7\u30e7\u30f3+i\uff09\u3067\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

\u6b21\u306b\u3001d3\u3067div\u8981\u7d20\u306e\u9ad8\u3055\u3092\u8a2d\u5b9a\u3057\u3066\u307f\u307e\u3059\u3002\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3001attr()\u306e\u6b21\u306bstyle()\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
var dataset = [10, 20, 30, 40, 50];\n\nd3.select(\"body\").selectAll(\"div\")\n  .data(dataset)\n  .enter()\n  .append(\"div\")\n  .attr(\"class\", \"bar\")\n  .style(\"height\", function(d) {\n    return d + \"px\";\n  });<\/code><\/pre>\n\n\n\n

\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3001\u9ad8\u3055\u304c10\u301c50\u30d4\u30af\u30bb\u30eb\u306ediv\u8981\u7d20\u304c\u751f\u6210\u3055\u308c\u307e\u3057\u305f\u3002\u3053\u3053\u3067\u521d\u3081\u3066\u30c7\u30fc\u30bf\u3092\u300c\u5f62\u300d\u306b\u5909\u63db\u3057\u305f\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

\u6b21\u306b\u3001\u3082\u3046\u5c11\u3057\u68d2\u30b0\u30e9\u30d5\u3068\u3057\u3066\u306e\u4f53\u88c1\u3092\u6574\u3048\u3066\u3042\u3052\u307e\u3057\u3087\u3046\u3002style()\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u66f8\u304d\u63db\u3048\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
.style(\"height\", function(d) {\n    var barHeight = d * 5;          \/\/\u914d\u5217\u306e\u5024\u30925\u500d\u306b\u3059\u308b\n    return barHeight + \"px\";\n});<\/code><\/pre>\n\n\n\n

\u3055\u3089\u306b\u3001css\u3067\u4f59\u767d\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
div.bar {\n    display: inline-block;\n    width: 20px;\n    height: 75px;  \/* d3\u3067\u4e0a\u66f8\u304d\u3055\u308c\u308b *\/\n    margin-right: 2px;\n    background-color: blue;\n}<\/code><\/pre>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

\u68d2\u30b0\u30e9\u30d5\u3089\u3057\u304f\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
\u3053\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u306f\u3001\u914d\u5217\u306e\u8981\u7d20\u3092\u5897\u3084\u305b\u3070\u81ea\u52d5\u7684\u306b\u68d2\u30b0\u30e9\u30d5\u306b\u5909\u63db\u3057\u3066\u304f\u308c\u307e\u3059\u3002\u8981\u7d20\u6570\u3092\u5897\u3084\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
var dataset = [ 5, 10, 15, 20, 25, 100, 20, 15, 80, 70]; \/\/\u914d\u5217\u3092\u5ba3\u8a00<\/code><\/pre>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
03_drawing_divs_spaced<\/a>\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/a><\/div>\n\n\n\n
03_drawing_divs_spaced_v7.html<\/a>\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
\u3053\u306e\u56de\u3067\u306f\u3001html\u306ediv\u8981\u7d20\uff08\uff09\u3092\u4f7f\u3063\u3066\u30c7\u30fc\u30bf\u3068\u95a2\u9023\u3065\u3051… Read more »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,27],"tags":[],"class_list":["post-8388","post","type-post","status-publish","format-standard","hentry","category-d3-js","category-27"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t