D3js - 如何使我的可視化響應？

Question

注意：請原諒我，我已經刪除了各種元素，例如工具提示和字體，因此您可以看到我正在使用的內容的示例。 請讓我知道，除了我提供的內容之外，您是否認為還有其他事情正在破壞這一點。 對於所有強化目的，有一個左側徑向圖和一個右側條形圖。

我希望實現的是使這些圖表響應不同的瀏覽器窗口大小。 我試圖將寬度和高度屬性編輯為徑向圖表上 0 0 800 800 的 viewBox，#radial-chart 容器上的寬度為 100%，但是當我從 xL 移動窗口時，輸出太小了顯示器（22 英寸）到我的筆記本電腦（15 英寸）

我也嘗試過使用媒體查詢使用 css zoom(0.6) 但我有工具提示我們使用 d3.event 定位來跟蹤針對光標的工具提示位置，但這把它搞砸了。

我非常困，因為很多資源都指向我的視圖框，但這種方法對我不起作用。

提前致謝。

 var h = 800 var w = 800 const arc = d3.arc(); const svg = d3 .select("#radial-chart") .append("svg") .attr("width", w) .attr("height", h); var arcData = [{ domain: "1", innerRadius: 0, outerRadius: h / 1.75, startAngle: (Math.PI * -20) / 180, endAngle: (Math.PI * 20) / 180, }, { domain: "2", innerRadius: 0, outerRadius: 300, startAngle: (Math.PI * 20) / 180, endAngle: (Math.PI * 60) / 180, }, { domain: "3", innerRadius: 0, outerRadius: 280, startAngle: (Math.PI * 60) / 180, endAngle: (Math.PI * 100) / 180, }, { domain: "4", innerRadius: 0, outerRadius: 260, startAngle: (Math.PI * 100) / 180, endAngle: (Math.PI * 140) / 180, }, { domain: "5", innerRadius: 0, outerRadius: 240, startAngle: (Math.PI * 140) / 180, endAngle: (Math.PI * 180) / 180, }, { domain: "6", innerRadius: 0, outerRadius: 220, startAngle: (Math.PI * 180) / 180, endAngle: (Math.PI * 220) / 180, }, { domain: "7", innerRadius: 0, outerRadius: 200, startAngle: (Math.PI * 220) / 180, endAngle: (Math.PI * 260) / 180, }, { domain: "8", innerRadius: 0, outerRadius: 150, startAngle: (Math.PI * 300) / 180, endAngle: (Math.PI * 340) / 180, }, { domain: "9", innerRadius: 0, outerRadius: 100, startAngle: (Math.PI * 260) / 180, endAngle: (Math.PI * 300) / 180, }, ]; // Order needs to be from JSON var colorScale = d3 .scaleOrdinal() .domain([ "1", "2", "3", "4", "5", "6", "7", "8", "9", ]) .range([ "#f7941e", "#233f92", "#14385c", "#007ac1", "#4c3b2d", "#94c83d", "#0000a0", "#440099", "#e7253d", ]); const slices = arcData.map((d) => arc(d)); svg .selectAll("path") .data(slices) .enter() .append("path") .attr("d", (d) => d) .attr("id", (d, i) => "arc" + i) .style("fill", (d, i) => colorScale(i)) .style("z-index", 100) .style("opacity", 0.5) .attr("class", "arc selected") .attr('transform', 'translate(325,550) scale(0,0)') .transition().transition() .delay(400) .duration(function(d, i) { return 70 * i }) .attr('transform', 'translate(325,550) scale(1,1)') var width = 1000 const bar1 = d3 .select("#bar1") .append("svg") .attr("width", width) .attr("height", 175); var colorScale1 = d3 .scaleOrdinal() .range(["#02029D", "#223AAF", "#446FBD", "#669CCB"]); var x = d3.scaleLinear().range([0, width]); var y = d3.scaleLinear().rangeRound([200]); var bar1Data = [{ position: 1, label: "A", value: 25 }, { position: 2, label: "B", value: 25, value2: 0 }, { position: 3, label: "C", value: 25 }, { position: 4, label: "D", value: 22 }, ]; bar1 .append("text") .attr("x", width / 2) .attr("y", 60) .attr("text-anchor", "middle") .style("font-family", "marsBook") .style("font-size", "24px") .style("user-select", "none") .text("Household Income"); //Join data to rects const rects = bar1.selectAll("rect").data(bar1Data); rects .attr("width", (d) => { return x(d.value); }) .attr("height", 80) .attr("class", (d, i) => { return "bar" + i; }) .attr("x", function(d, i) { // Note that I use `.map` here to take only the `.value` attribute // from the data and create an array of numbers. Then I pass it to `x` // to be transformed (could also be the other way around if you'd like, // so sum(bar1Data.map((e) => x(e.value)), 0, i) return x( sum( bar1Data.map((e) => e.value), 0, i ) ); }) .attr("y", 80); rects .enter() .append("rect") .attr("width", (d) => { return x(d.value); }) .attr("height", 80) .attr("x", (d, i) => { // Note that I use `.map` here to take only the `.value` attribute // from the data and create an array of numbers. Then I pass it to `x` // to be transformed (could also be the other way around if you'd like, // so sum(bar1Data.map((e) => x(e.value)), 0, i) return x( sum( bar1Data.map((e) => e.value), 0, i ) ); }) .attr("y", 80) .style("fill", (d, i) => colorScale1(i)) function sum(array, start, end) { var total = 0; for (var i = start; i < end; i++) total += array[i]; return total; }

 html { font-family: Arial, Helvetica, sans-serif; } body { margin: 0; padding: 0; max-width: 100vw; } * { box-sizing: border-box; } header { width: 100%; top: 0; margin: 0; padding-top: 0; padding: 0.781vw 0; padding-bottom: 0; background-color: transparent; } p { font-family: MarsBook; margin: 0; } ul { display: flex; flex-direction: row; align-items: center; list-style: none; width: 90%; padding: 0; margin: 0; z-index: 0; background-color: transparent; } header h1 { color: #0000a0; margin-left: 2vw; margin-right: 0.5vw; font-family: marsBold; flex-wrap: nowrap; white-space: nowrap; font-size: 2vw; } header p { font-size: 2.5vw; color: #00dcfa; } header .subtitle { margin-left: 0.5vw; font-family: marsBold; font-size: 2vw; flex-wrap: nowrap; white-space: nowrap; } .container { display: flex; flex-direction: row; } #bars { display: flex; flex-direction: column; margin-left: 40px; margin-top: -10px; } #bars h1 { align-content: center; text-align: center; } .selected { opacity: 1!important } image#arc0, image#arc1, image#arc2, image#arc3, image#arc4, image#arc5, image#arc6, image#arc7, image#arc8 { opacity: 0.35; transition: opacity 0.3; -webkit-transition: opacity 0.3 ease; -moz-transition: opacity 0.3 ease; } image#arc0:hover, image#arc1:hover, image#arc2:hover, image#arc3:hover, image#arc4:hover, image#arc5:hover, image#arc6:hover, image#arc7:hover, image#arc8:hover { opacity: 1 } rect { transition: width 0.5s, x 0.5s, height 0.5s, y 0.5s ease; -webkit-transition: x 0.5s, width 0.5s, height 0.5s, y 0.5s ease; -moz-transition: width 0.5s, x 0.5s, height 0.5s, y 0.5s ease; } image, path { transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; } #radial-chart { margin-top: -4vh; margin-bottom: -8vh; align-content: center; align-items: center; text-align: center; } #bars { margin-top: -4vh; margin-bottom: -8vh; } .tooltip { background: rgba(245, 245, 245, 0.925); opacity: 0; color: rgba(60, 60, 60, 0.925); border-radius: 5px; padding: 5px 10px; width: 180px; pointer-events: none; position: absolute; font-size: 18px; } #bar1, #bar2, #bar3, #bar4 { position: relative; } .tooltipb1, .tooltipb2, .tooltipb3, .tooltipb4 { flex-direction: column; cursor: pointer; position: absolute; border-radius: 50%; background: rgb(164, 164, 164); background: linear-gradient(150deg, rgba(255, 255, 255, 1) 0%, #B7DFF1 25%, #70C1E3 50%, #7E9CD7 75%, #8787CF 100%); width: 30px; height: 30px; justify-content: center; align-content: center; text-align: center; color: #3c3c3c; font-family: marsBold; font-size: 20px; z-index: 3; position: absolute; display: flex; top: 28px; right: 35px; margin-top: 0vh } .tooltipb3 { top: 48px; } .hovered { border: 2px solid #0000a0; } .tooltipb2.hovered { border: 2px solid cyan; } .tooltipb3.hovered { border: 2px solid goldenrod; } .tooltipb4.hovered { border: 2px solid red } .tooltipb1 span, .tooltipb2 span, .tooltipb3 span, .tooltipb4 span { margin: auto; margin-top: 9px; } .desc-container1, .desc-container2, .desc-container3, .desc-container4 { font-size: 14px; display: flex; align-items: center; position: absolute; border-radius: 0.718vw; background-color: whitesmoke; right: 80px; top: 0px; width: 240px; z-index: 0; flex-direction: column; justify-content: center; padding: 10px; opacity: 0; visibility: hidden; transition: visibility 0.25s, opacity 0.25s linear; -webkit-transition: visibility 0.25s, opacity 0.25s linear; -moz-transition: visibility 0.25s, opacity 0.25s linear; user-select: none; } .desc-container2 {} .desc-container3 { top: 20px; } .desc-container4 { top: 0px; width: 240px; } .show { opacity: 0.95; visibility: visible; transition: visibility 0.25s, opacity 0.25s linear; -webkit-transition: visibility 0.25s, opacity 0.25s linear; -moz-transition: visibility 0.25s, opacity 0.25s linear; } .content { color: #3c3c3c } .svg-container { display: inline-block; position: relative; width: 100%; padding-bottom: 100%; /* aspect ratio */ vertical-align: top; overflow: hidden; } .svg-content-responsive { display: inline-block; position: absolute; top: 10px; left: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <div class="container"> <div id="radial-chart"></div> <div id="bars"> <div id="bar1"></div> </div> </div>

Answer 1

我能夠通過一些簡單的 CSS 解決無響應問題。

    @media screen and (max-width: 1280px) {
#radial-chart {
    zoom: 0.6
}
#bars {
    margin-left: 120px;
    zoom: 0.6
}

.footer {
    padding-top: 1vh!important;
}

.tooltip {
    font-size: 14px;
}
}

我已經使用縮放來重新設計 div 並使所有項目變小而不影響身體。