我可以對 d3v7 中的路徑應用縮放。但是，我怎樣才能只放大 x 軸而不是標準縮放？
(1) 我如何呼叫縮放功能：
var svgArea = d3.select('#svg');
const path = svgArea.append("path");
const line = d3.line()
.x(d => scale.x(d.sample))
.y(d => scale.y(d.value));
path
.datum(dataset)
.attr("fill", fillColor)
.attr("stroke", color)
.attr("d", line);
svgArea.call(zoom, padding, width, height, path);
(2) 縮放功能
function zoom(svg, padding, width, height, path) {
var extent = [
[padding, padding],
[width, height]
];
var zooming = d3.zoom()
.scaleExtent([1, 3])
.translateExtent(extent)
.extent(extent)
.on("zoom", zoomed);
svg.call(zooming);
function zoomed(e) {
path.attr("transform", e.transform);
}
}
uj5u.com熱心網友回復：
在您的縮放功能中，您可以重新縮放 x 軸，然后使用它來重繪整個圖形：
const zoom = d3.zoom()
.on("zoom", function(event) {
x2 = event.transform.rescaleX(x);
xAxisG.call(xAxis.scale(x2));
path.attr("d", line);
})
x2指的是作業規模（也與 d3.line() 一起使用）。該比例x用作重新縮放的參考比例（我們不想x2使用自身重新縮放，因為這樣會得到錯誤的縮放值）。通過這樣做，我們只操縱 x 值，而 y 值保持不變。
下面我添加了一個剪切路徑來阻止圖形從繪圖區域溢位。
您不能使用縮放變換本身來操縱圖形，因為它將相同的縮放值應用于 x 軸和 y 軸。它只縮放幾何。這里提出的方法是語意縮放：使用資料并在給定縮放變換狀態的情況下在一維中重新縮放它。
這是一個作業示例：
顯示代碼片段
const width = 500;
const height = 180;
const padding = {top: 10, bottom: 50, left: 40, right: 20};
const svg = d3.select("svg")
.attr("width", width padding.right padding.left)
.attr("height", height padding.top padding.bottom)
const plotArea = svg.append("g").attr("transform","translate(" [padding.left,padding.top] ")")
const clippingRect = plotArea
.append("clipPath")
.attr("id", "clippy")
.append("rect")
.attr("width",width)
.attr("height",height)
.attr("fill","none")
const data = d3.range(100).map(function(d) {
return { value: Math.random(), sample: d }
})
const x = d3.scaleLinear().range([0,width]).domain([0,100]);
let x2 = x.copy();
const y = d3.scaleLinear().range([height,0]).domain([0,1]);
const line = d3.line()
.x(d => x2(d.sample))
.y(d => y(d.value));
const xAxis = d3.axisBottom(x2);
const xAxisG = plotArea.append("g")
.attr("transform","translate(" [0,height] ")")
.call(xAxis);
const yAxis = d3.axisLeft(y);
const yAxisG = plotArea.append("g").call(yAxis)
const path = plotArea.append("path")
.datum(data)
.attr("d", line)
.attr("clip-path","url(#clippy)")
const zoom = d3.zoom()
.on("zoom", function(event) {
x2 = event.transform.rescaleX(x);
xAxisG.call(xAxis.scale(x2));
path.attr("d", line);
})
svg.call(zoom);path {
fill: none;
stroke-width: 1px;
stroke: black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.0/d3.min.js"></script>
<svg></svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/491658.html
標籤：javascript d3.js