{ const svg = d3.select(DOM.svg(innerWidth + margin.left + margin.right, (numTypes * (rowHeight + rowPadding)) + margin.top + margin.bottom+50)); let chart = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`); const tooltipCircle = d3tip() .attr('class', 'd3-tip') .html(d =>`

類型: ${typetoName[d.type]}
時間: ${d.dateStr}

`); svg.call(tooltipCircle); const tooltipTopbar = d3tip() .attr('class', 'd3-tip') .html(d =>`

同時刊登家數: ${d}

`); svg.call(tooltipTopbar); const tooltipRightbar = d3tip() .attr('class', 'd3-tip') .html(d =>`

類型: ${d.key}
累計刊登: ${d.value.count}

`); svg.call(tooltipRightbar); let topBars = chart.append("g") .selectAll("rect") .data(dateStats) .enter().append("rect") .attr("x", (d,i) => topBarX(i)) .attr("y", d => -topBarY(d)) .attr("height", d => topBarY(d)) .attr("width", d => topBarX(d + 1) - topBarX(d)) .attr("fill", "#53A851") .attr("opacity", 0.5) .on('mouseover', tooltipTopbar.show) .on('mouseout', tooltipTopbar.hide); chart.append("g") .call(xAxis); let typeRows = chart.append("g") .selectAll("g") .data(eventTypeEntries) .enter().append("g"); typeRows.append("text") .text(d => `${d.key}`) .attr("class", "label") .style("font-size", "13px") .attr("x", -margin.left) .attr("y", d => y(d.key) + textOffset); typeRows.append("line") .attr("x1", x.range()[0]) .attr("x2", x.range()[1]) .attr("stroke", "rgba(0,0,0,0.05)") .attr("y1", d => y(d.key)) .attr("y2", d => y(d.key)); typeRows.append("rect") .attr("x", rightBarX.range()[0]) .attr("y", d => y(d.key) - rowHeight / 2) .attr("height", rowHeight) .attr("width", d => rightBarX(d.value.success) - rightBarX.range()[0]) .attr("fill", d => colorOfType[d.key]) .attr("opacity", 0.5) .on('mouseover', tooltipRightbar.show) .on('mouseout', tooltipRightbar.hide); typeRows.append("text") .text(d => d.value.success) .attr("class", "label") .style("font-size", "13px") .attr("text-anchor", "end") .attr("x", rightBarX.range()[1] - 4) .attr("y", d => y(d.key) + textOffset); chart.append("g") .selectAll("circle") .data(filterData) .enter().append("circle") .attr("cx", d => x(d.date)) .attr("cy", d => y(typetoName[d.type])) .attr("r", d => eventTypes[typetoName[d.type]].scale(d.count)/2) .attr("fill", d=>colorOfType[typetoName[d.type]]) .attr("opacity", 0.25) .on('mouseover', tooltipCircle.show) .on('mouseout', tooltipCircle.hide); return svg.node(); }