svg = { //ツールチップ用データ let data3ForToolTip = d3.range(1, 48).map((d) => [d]); for (let j = 0; j < 47; j++) { data3ForToolTip[j].push( data3ById.get(data3ForToolTip[j][0])[0].prefectures + "(" + data3ById.get(data3ForToolTip[j][0])[0].rank + "位)" ); data3ForToolTip[j].push(data3ById.get(data3ForToolTip[j][0])[0].num + "校"); for (let i = 0; i < data3ById.get(data3ForToolTip[j][0]).length; i++) { if (data3ById.get(data3ForToolTip[j][0])[0].num > 0) { data3ForToolTip[j].push( data3ById.get(data3ForToolTip[j][0])[i].university + "(" + data3ById.get(data3ForToolTip[j][0])[i].department + ")" ); } } } const exe = [0]; //削除したい位置（先頭が0であることに注意） for (let i = 0; i < data3ForToolTip.length; i++) { //このfor文で行を回す for (let j = 0; j < exe.length; j++) { data3ForToolTip[i].splice(exe[j] - j, 1); } } console.log(data3ForToolTip); let data4ForToolTip = d3.range(1, 48).map((d) => [d]); for (let j = 0; j < 47; j++) { data4ForToolTip[j].push( data4ById.get(data4ForToolTip[j][0])[0].prefectures + "(" + data4ById.get(data4ForToolTip[j][0])[0].rank + "位)" ); data4ForToolTip[j].push(data4ById.get(data4ForToolTip[j][0])[0].num + "校"); for (let i = 0; i < data4ById.get(data4ForToolTip[j][0]).length; i++) { if (data4ById.get(data4ForToolTip[j][0])[0].num > 0) { data4ForToolTip[j].push( data4ById.get(data4ForToolTip[j][0])[i].university + "(" + data4ById.get(data4ForToolTip[j][0])[i].department + ")" ); } } } for (let i = 0; i < data4ForToolTip.length; i++) { //このfor文で行を回す for (let j = 0; j < exe.length; j++) { data4ForToolTip[i].splice(exe[j] - j, 1); } } console.log(data4ForToolTip); let data5ForToolTip = d3.range(1, 48).map((d) => [d]); for (let j = 0; j < 47; j++) { data5ForToolTip[j].push( data5ById.get(data5ForToolTip[j][0])[0].prefectures + "(" + data5ById.get(data5ForToolTip[j][0])[0].rank + "位)" ); data5ForToolTip[j].push(data5ById.get(data5ForToolTip[j][0])[0].num + "校"); for (let i = 0; i < data5ById.get(data5ForToolTip[j][0]).length; i++) { if (data5ById.get(data5ForToolTip[j][0])[0].num > 0) { data5ForToolTip[j].push( data5ById.get(data5ForToolTip[j][0])[i].university + "(" + data5ById.get(data5ForToolTip[j][0])[i].department + ")" ); } } } for (let i = 0; i < data5ForToolTip.length; i++) { //このfor文で行を回す for (let j = 0; j < exe.length; j++) { data5ForToolTip[i].splice(exe[j] - j, 1); } } console.log(data5ForToolTip); const svg = d3 .create("svg") .attr("viewBox", [0, 0, 850, 680]) .style("overflow", "visible"); //背景 svg .append("g") .append("rect") .attr("width", 850) .attr("height", 680) .attr("fill", "#eaf4fc") .attr("stroke", "rgba(0,0,0,0)"); const path = d3.geoPath(); if (r2 == "animation") { const color = d3 .scaleLinear() .domain(d3.extent(data3, (d) => d["num"])) .range(["hsl(0, 100%, 100%)", "hsl(0, 100%, 50%)"]); //凡例の軸のためのスケール関数 const colorAxisScale = d3.scaleLinear().domain([0, 17]).range([200, 350]); //凡例の軸 const yAxis = d3.axisRight(colorAxisScale).ticks(3); svg .attr("fill", "none") .attr("stroke", "#595857") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); const p = svg .selectAll(".prefecture") .data(topojson.feature(japan, japan.objects.prefectures).features) .join("path") .classed("prefecture", true) .attr("stroke-width", 0.3) .attr("d", path) .attr( "fill", (d, i) => // color(data3ById.values().find((dd) => dd.id === +d.id)["num"]) color(data3.find((dd) => dd.id === +d.id)["num"]) //地図内の情報のID（d.id）を文字列から数値に変換して、同じidを持つオブジェクトを探して、そのlength(=num)を参照している ); //凡例 svg .append("g") .selectAll("rect") .data(d3.range(11)) .join("rect") .attr("fill", (d, i) => color(d * 1.7)) .attr("stroke", "none") .attr("x", 650) .attr("y", (d, i) => 200 + d * 15) .attr("width", 15) .attr("height", 15); //y軸の追加 svg .append("g") .attr("transform", "translate(675,5)") .attr("fill", "black") .attr("stroke", "none") .call(yAxis); svg .append("g") .append("text") .attr("x", 675) .attr("y", 195) .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("fill", "black") .attr("stroke", "none") .text("(校)"); //ツールチップ const tooltip = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip .append("rect") .attr("rx", 10) // 横の角丸半径を指定 .attr("ry", 10) // 縦の角丸半径を指定 .attr("fill", "white") .attr("stroke", "#595857") .attr("stroke-weight", 2) .attr("width", 200) .attr("height", 150) .attr("opacity", 0); const showMyTooltip = (event) => { const mouseX = 10; const mouseY = 10; const datum = d3.select(event.target).datum(); tooltip.attr("transform", `translate(${mouseX},${mouseY})`); tooltip .selectAll("text") .data(data3ForToolTip[+datum.id - 1]) .join("text") .text((d) => d) .attr("x", 10) .attr("y", (d, i) => 20 + 15 * i) .attr("fill", function (d, i) { if (i == 0) { return "#800"; } else if (i == 1) { return "#ee7948"; } else { return "#595857"; } }) .attr("font-family", "sans-serif") .attr("stroke", "none") .attr("font-size", function (d, i) { if (i == 0) { return 15; } else if (i == 1) { return 13; } else { return 8; } }) .attr("font-weight", "bold"); tooltip.style("visibility", "visible"); d3.select(event.currentTarget).attr("fill-opacity", 0.5); }; const hideMyTooltip = (event) => { tooltip.style("visibility", "hidden"); d3.select(event.currentTarget).attr("fill-opacity", 1); }; p.on("pointerenter pointermove", showMyTooltip).on( "pointerleave", hideMyTooltip ); } else if (r2 == "video_game") { const color = d3 .scaleLinear() .domain(d3.extent(data4, (d) => d["num"])) .range(["hsl(0, 100%, 100%)", "hsl(0, 100%, 50%)"]); //凡例の軸のためのスケール関数 const colorAxisScale = d3.scaleLinear().domain([0, 33]).range([200, 350]); //凡例の軸 const yAxis = d3.axisRight(colorAxisScale).ticks(5); svg .attr("fill", "none") .attr("stroke", "#595857") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); const p = svg .selectAll(".prefecture") .data(topojson.feature(japan, japan.objects.prefectures).features) .join("path") .classed("prefecture", true) .attr("stroke-width", 0.3) .attr("d", path) // .attr("fill", (d, i) => `hsla(0, 100%, 50%, ${i * 2}%)`); .attr("fill", (d, i) => color(data4.find((dd) => dd.id === +d.id)["num"]) ); //凡例 svg .append("g") .selectAll("rect") .data(d3.range(11)) .join("rect") .attr("fill", (d, i) => color(d * 3.3)) .attr("stroke", "none") .attr("x", 650) .attr("y", (d, i) => 200 + d * 15) .attr("width", 15) .attr("height", 15); //y軸の追加 svg .append("g") .attr("transform", "translate(675,2.5)") .attr("fill", "black") .attr("stroke", "none") .call(yAxis); svg .append("g") .append("text") .attr("x", 675) .attr("y", 195) .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("fill", "black") .attr("stroke", "none") .text("(校)"); //ツールチップ const tooltip = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip .append("rect") .attr("rx", 10) // 横の角丸半径を指定 .attr("ry", 10) // 縦の角丸半径を指定 .attr("fill", "white") .attr("stroke", "#595857") .attr("stroke-weight", 2) .attr("width", 200) .attr("height", 150) .attr("opacity", 0); const showMyTooltip = (event) => { const mouseX = 10; const mouseY = 10; const datum = d3.select(event.target).datum(); tooltip.attr("transform", `translate(${mouseX},${mouseY})`); tooltip .selectAll("text") .data(data4ForToolTip[+datum.id - 1]) .join("text") .text((d) => d) .attr("x", 10) .attr("y", (d, i) => 20 + 15 * i) .attr("fill", function (d, i) { if (i == 0) { return "#800"; } else if (i == 1) { return "#ee7948"; } else { return "#595857"; } }) .attr("font-family", "sans-serif") .attr("stroke", "none") .attr("font-size", function (d, i) { if (i == 0) { return 15; } else if (i == 1) { return 13; } else { return 8; } }) .attr("font-weight", "bold"); tooltip.style("visibility", "visible"); d3.select(event.currentTarget).attr("fill-opacity", 0.5); }; const hideMyTooltip = (event) => { tooltip.style("visibility", "hidden"); d3.select(event.currentTarget).attr("fill-opacity", 1); }; p.on("pointerenter pointermove", showMyTooltip).on( "pointerleave", hideMyTooltip ); } else if (r2 == "media_art") { const color = d3 .scaleLinear() .domain(d3.extent(data5, (d) => d["num"])) .range(["hsl(0, 100%, 100%)", "hsl(0, 100%, 50%)"]); //凡例の軸のためのスケール関数 const colorAxisScale = d3.scaleLinear().domain([0, 20]).range([200, 350]); //凡例の軸 const yAxis = d3.axisRight(colorAxisScale).ticks(5); svg .attr("fill", "none") .attr("stroke", "#595857") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); const p = svg .selectAll(".prefecture") .data(topojson.feature(japan, japan.objects.prefectures).features) .join("path") .classed("prefecture", true) .attr("stroke-width", 0.3) .attr("d", path) // .attr("fill", (d, i) => `hsla(0, 100%, 50%, ${i * 2}%)`); .attr("fill", (d, i) => color(data5.find((dd) => dd.id === +d.id)["num"]) ); //凡例 svg .append("g") .selectAll("rect") .data(d3.range(11)) .join("rect") .attr("fill", (d, i) => color(d * 2)) .attr("stroke", "none") .attr("x", 650) .attr("y", (d, i) => 200 + d * 15) .attr("width", 15) .attr("height", 15); //y軸の追加 svg .append("g") .attr("transform", "translate(675,4.25)") .attr("fill", "black") .attr("stroke", "none") .call(yAxis); svg .append("g") .append("text") .attr("x", 675) .attr("y", 195) .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("fill", "black") .attr("stroke", "none") .text("(校)"); //ツールチップ const tooltip = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip .append("rect") .attr("rx", 10) // 横の角丸半径を指定 .attr("ry", 10) // 縦の角丸半径を指定 .attr("fill", "white") .attr("stroke", "#595857") .attr("stroke-weight", 2) .attr("width", 200) .attr("height", 150) .attr("opacity", 0); const showMyTooltip = (event) => { const mouseX = 10; const mouseY = 10; const datum = d3.select(event.target).datum(); tooltip.attr("transform", `translate(${mouseX},${mouseY})`); tooltip .selectAll("text") .data(data5ForToolTip[+datum.id - 1]) .join("text") .text((d) => d) .attr("x", 10) .attr("y", (d, i) => 20 + 15 * i) .attr("fill", function (d, i) { if (i == 0) { return "#800"; } else if (i == 1) { return "#ee7948"; } else { return "#595857"; } }) .attr("font-family", "sans-serif") .attr("stroke", "none") .attr("font-size", function (d, i) { if (i == 0) { return 15; } else if (i == 1) { return 13; } else { return 8; } }) .attr("font-weight", "bold"); tooltip.style("visibility", "visible"); d3.select(event.currentTarget).attr("fill-opacity", 0.5); }; const hideMyTooltip = (event) => { tooltip.style("visibility", "hidden"); d3.select(event.currentTarget).attr("fill-opacity", 1); }; p.on("pointerenter pointermove", showMyTooltip).on( "pointerleave", hideMyTooltip ); } svg .append("path") .attr("stroke-width", 0.8) .attr("d", path(topojson.feature(japan, japan.objects.country))); return svg.node(); }