如何使用 D3 修復 svg 圖例的重疊刻度標簽

Question

我有一個使用線性漸變和 D3 概念創建的顏色圖例。 我目前面臨的問題是圖例的刻度標簽重疊。

我必須一直顯示 Min 和 Max 值以及額外的刻度。

我共享了代碼片段和 JS fiddle。 我嘗試了幾件事，但似乎沒有什么對我有用。

 const itemColor = [{ offset: 0.0, color: "#ff0000" }, { offset: 0.1, color: "#ffff00" }, { offset: 0.4, color: "#00ff00" }, { offset: 0.5, color: "#00ffff" }, { offset: 0.8, color: "#0000ff" }, { offset: 1.0, color: "#ff00ff" } ]; const svg = d3.select("svg"); let min = 1918 let max = 3780 const linearColorScale = d3.scaleLinear().domain([min, max]).range([0, 150]); const id = "linear-gradient-0"; const linearGradient = svg.append("defs").append("linearGradient").attr("id", "linear-gradient-1").attr("x1", "0%").attr("x2", "100%").attr("y1", "0%").attr("y2", "0%"); // append the color linearGradient.selectAll("stop").data(itemColor).enter().append("stop").attr("offset", function(data) { return linearColorScale(min + (data.offset * (max - min))) / 1.5 + "%"; }).attr("stop-color", function(data) { return data.color; }); // draw the rectangle and fill with gradient svg.append("rect").attr("x", 10).attr("y", 108).attr("width", 150).attr("height", 20).style("fill", "url(#linear-gradient-1)"); svg.append("text").text("Linear Scale").attr("y", 93) // create tick svg.append("g").attr("transform", "translate(10,130)").call(d3.axisBottom(linearColorScale).tickValues( linearColorScale.ticks( 3 ).concat( linearColorScale.domain() ) ));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.4.0/d3.min.js"></script> <svg width="500"></svg>

JS小提琴： https://jsfiddle.net/1g7qmh3y/2/

Answer 1

如果您既 a) 受限於您可以使用的空間，並且 b) 必須顯示域的范圍加上內部刻度； 那么您可以考慮顏色條頂部的另一個軸。 這樣，您可以在頂軸上顯示最小值/最大值，在底軸上顯示中間刻度。 見下文：

 const itemColor = [ { offset: 0.0, color: "#ff0000" }, { offset: 0.1, color: "#ffff00" }, { offset: 0.4, color: "#00ff00" }, { offset: 0.5, color: "#00ffff" }, { offset: 0.8, color: "#0000ff" }, { offset: 1.0, color: "#ff00ff" } ]; const svg = d3.select("svg"); let min = 1918 let max = 3780 const linearColorScale = d3.scaleLinear().domain([min, max]).range([0, 150]); const id = "linear-gradient-0"; const linearGradient = svg.append("defs").append("linearGradient").attr("id", "linear-gradient-1").attr("x1", "0%").attr("x2", "100%").attr("y1", "0%").attr("y2", "0%"); // append the color linearGradient.selectAll("stop").data(itemColor).enter().append("stop").attr("offset", function(data) { return linearColorScale(min + (data.offset * (max - min))) / 1.5 + "%"; }).attr("stop-color", function(data) { return data.color; }); // draw the rectangle and fill with gradient svg.append("rect").attr("x", 10).attr("y", 108).attr("width", 150).attr("height", 20).style("fill", "url(#linear-gradient-1)"); // move it up slightly to accommodate upper axis svg.append("text").text("Linear Scale").attr("y", 73) // create lower ticks - removed domain of scale and removed outer ticks svg.append("g").attr("transform", "translate(10,130)").call(d3.axisBottom(linearColorScale).tickValues( linearColorScale.ticks(3)).tickSizeOuter(0) ); // create another axis for upper ticks svg.append("g").attr("transform", "translate(10,103)").call(d3.axisTop(linearColorScale).tickValues(linearColorScale.domain()));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.4.0/d3.min.js"></script> <svg width="500"></svg>