2f:T1fad,{ const width = 1000; const height = 1500; const margin = { top: 20, right: 20, bottom: 50, left: 20 }; const interval = -15; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width); //keyの数でwidthを等分 const xScale = d3 .scaleBand() .domain([...dataOfDates.keys()]) .range([margin.left, width - margin.right]); var burger_top = htl.svg``; var burger_topPath = d3.select(burger_top).select("path"); var burger_topD = burger_topPath.attr("d"); var burger_buttom = htl.svg``; var burger_buttomPath = d3.select(burger_buttom).select("path"); var burger_buttomD = burger_buttomPath.attr("d"); const apple = htl.svg``; const tenpura = htl.svg``; const tomato = htl.svg``; const lettuce = htl.svg``; const egg = htl.svg``; const ebi = htl.svg``; const meat = htl.svg``; const takosan = htl.svg``; const dayG = svg .selectAll("g") .data(dataOfDates) .join("g") .attr("class", "day") .attr("transform", (d) => `translate(${xScale(d[0])}, 0)`); const posG = dayG .selectAll("g") .attr("class", "ing") .data((d) => d[1]) .join("g") .attr( "transform", (d, i) => `translate(0, ${i * interval + height - margin.bottom - 740})` ); const bottomG = dayG .append("g") .attr("class", "bottom") .attr("transform", `translate(15, ${height - 40}) scale(4)`); const topG = dayG .append("g") .attr("class", "top") .attr( "transform", (d, i) => `translate(10, ${ d[1].length * interval + height - margin.bottom }) scale(4)` ); bottomG .append("path") .attr("d", burger_buttomD) .attr("width", "100") .attr("fill", "#f18d1a") .attr("stroke-width", "0.4") .attr("stroke", "black"); topG .append("path") .attr("d", burger_topD) .attr("width", "100") .attr("fill", "#f18d1a") .attr("stroke-width", "0.4") .attr("stroke", "black"); posG.each(function (d, i) { switch (d.type) { case "携帯": case "スマホ": case "スマホ電源": d3.select(this).node().appendChild(lettuce.cloneNode(true)); break; case "照明": case "自室照明": case "リビング照明": d3.select(this).node().appendChild(meat.cloneNode(true)); break; case "電子レンジ": d3.select(this).node().appendChild(apple.cloneNode(true)); break; case "洗濯機": d3.select(this).node().appendChild(ebi.cloneNode(true)); case "IH": d3.select(this).node().appendChild(egg.cloneNode(true)); break; case "トイレ": case "トイレ照明": d3.select(this).node().appendChild(tomato.cloneNode(true)); break; case "脱衣所": case "洗面所": case "脱衣所照明": case "洗面所照明": d3.select(this).node().appendChild(takosan.cloneNode(true)); break; default: d3.select(this).node().appendChild(tenpura.cloneNode(true)); break; } }); bottomG.lower(); return svg.node(); }30:T1697,{ const test = d3.create("svg").attr("width", width).attr("height", 100); const apple = htl.svg``; const tenpura = htl.svg``; const tomato = htl.svg``; const lettuce = htl.svg``; const egg = htl.svg``; const ebi = htl.svg``; const meat = htl.svg``; const takosan = htl.svg``; // 10個のグループ要素を生成　X座標、色、透明度を指定 const g = test .selectAll("g") .data(d3.range(8)) .join("g") .attr("transform", (d) => `translate(${d * 120}, 0)`); // // グループ要素にpath要素を追加し、d属性にheartPathのd属性を指定 // g.append("path").attr("d", heartD); g.each(function (d, i) { if (i === 0) { d3.select(this).node().appendChild(lettuce.cloneNode(true)); } else if (i === 1) { d3.select(this).node().appendChild(meat.cloneNode(true)); } else if (i === 2) { d3.select(this).node().appendChild(tomato.cloneNode(true)); } else if (i === 3) { d3.select(this).node().appendChild(takosan.cloneNode(true)); } else if (i === 4) { d3.select(this).node().appendChild(apple.cloneNode(true)); } else if (i === 5) { d3.select(this).node().appendChild(ebi.cloneNode(true)); } else if (i === 6) { d3.select(this).node().appendChild(egg.cloneNode(true)); } else { d3.select(this).node().appendChild(tenpura.cloneNode(true)); } }); return test.node(); }31:[] 2d:{"title":"Button Burger","cells":[{"id":0,"value":"# Button Burger","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"import { names, dataset } from \"b0c06c8d8a1da6a3\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewof dataOfName = Inputs.select(names, {\n value: names.get(\"Azuma\"), //初期値を自分のデータにする\n label: \"Person:\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"#### データ：${dataOfName.at(0).name}","pinned":false,"hidden":false,"mode":"md"},{"id":228,"value":"dataOfDates = {\n // データに　day と msec を追加\n // msecは、00:00からのミリ秒\n const dataWithDayMsec = dataOfName.map((d) => ({\n day: new Date( //新たにdayという時間の情報を抜いた属性を作る\n Date.UTC(\n d.date.getUTCFullYear(),\n d.date.getUTCMonth(),\n d.date.getUTCDate()\n )\n ),\n msec: (d.date.getUTCHours() * 60 + d.date.getUTCMinutes()) * 60 * 1000,\n ...d\n }));\n\n return d3.group(dataWithDayMsec, (d) => d.day);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":712,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":744,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"スマホ：　レタス \n自室・リビング照明：　肉 \nトイレ：　トマト \n洗面所：　たこさんウインナー \n電子レンジ：　りんご \n洗濯機：　えび \nIH：　たまご \nその他：　えび天","pinned":false,"hidden":false,"mode":"md"},{"id":783,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":266,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}