D3條形圖水平平移-有解無憂

我有一個 D3 條形圖，我希望它水平平移，有點像這里的示例：https ://jsfiddle.net/Cayman/vpn8mz4g/1/但左側沒有溢位問題。

這是我的 csv 資料：

month,revenue,profit
January,123432,80342
February,19342,10342
March,17443,15423
April,26342,18432
May,34213,29434
June,50321,45343
July,54273,80002
August,60000,30344
September,44432,32444
October,21332,9974
November,79105,48711
December,45246,21785

這是我的完整代碼：https ://plnkr.co/edit/ZmNcEB0QFVg4r8PA?open=lib/script.js&preview

我將不勝感激這方面的任何幫助。提前致謝！

uj5u.com熱心網友回復：

你有兩個問題：

該示例使用連續時間尺度，而您的代碼使用具有離散域的序數帶尺度。縮放轉換（在您的 D3 版本中）不提供自動轉換比例本身的功能（D3 如何知道“縮放”任意離散值？）
您的代碼的 D3 版本中的縮放轉換是從您提供的示例中使用的版本演變而來的。

您可以將所有條形rect元素放入一個 svg 組（“ zoomGroup”）并將縮放轉換應用于該組。在第二步中，您可以通過根據縮放轉換提供的 x 偏移和縮放因子更新其范圍來“縮放”x 軸。

// the zooming & panning
const zoom = d3.zoom()
  // define the zoom event handler with the zoom transformation as the parameter
  .on("zoom", ({transform}) => {
    // the scaling/zooming factor: scaleFactor = 2 means double the size
    const scaleFactor = transform.k;
    // the x offset of the bars after zooming and panning (this depends on the x position of the cursor when zooming)
    const xOffset = transform.x;
    // horizontally move and then scale the bars
    zoomGroup.attr('transform', `translate(${xOffset} 0) scale(${scaleFactor} 1)`);
    
    // also update the viewport range of the x axis
    x.range([xOffset, WIDTH * scaleFactor   xOffset]);
    xAxisGroup.call(xAxisCall)
  });

最后，您可以應用剪輯路徑以確保條形rect元素和 x 軸都不會繪制在視口之外。請記住，您將需要兩個 svg group ( g) 元素的級聯：

barsGroup將剪輯路徑應用到的一個父組 (" ")
一個子組 (" zoomGroup") 應用縮放變換

這是因為對組的任何變換也將變換其剪輯路徑。

// add clip paths to the svg to hide overflow when zooming/panning
const defs = svg.append('defs');
const barsClipPath = defs.append('clipPath')
    .attr('id', 'bars-clip-path')
  .append('rect')
  .attr('x',0)
  .attr('y', 0)
  .attr('width', WIDTH)
  .attr('height', 400);
  
// apply clip path to group of bars
barsGroup.attr('clip-path', 'url(#bars-clip-path)');
// apply clip path to the axis group
xAxisGroup.attr('clip-path', 'url(#bars-clip-path)');

把它們放在一起：

const data = [
  ['January', 123432, 80342],
  ['February', 19342, 10342],
  ['March', 17443, 15423],
  ['April', 26342, 18432],
  ['May', 34213, 29434],
  ['June', 50321, 45343],
  ['July', 54273, 80002],
  ['August', 60000, 30344],
  ['September', 44432, 32444],
  ['October', 21332, 9974],
  ['November', 79105, 48711],
  ['December', 45246, 21785]
].map((item, i) => {
  return {
    index: i,
    month: item[0],
    revenue: item[1],
    profit: item[2]
  }
});


const MARGIN = {
  LEFT: 100,
  RIGHT: 10,
  TOP: 10,
  BOTTOM: 130
}
// total width incl margin
const VIEWPORT_WIDTH = 1000;
// total height incl margin
const VIEWPORT_HEIGHT = 400;

const WIDTH = VIEWPORT_WIDTH - MARGIN.LEFT - MARGIN.RIGHT
const HEIGHT = VIEWPORT_HEIGHT - MARGIN.TOP - MARGIN.BOTTOM

let flag = true

const svg = d3.select(".chart-container").append("svg")
  .attr("width", WIDTH   MARGIN.LEFT   MARGIN.RIGHT)
  .attr("height", HEIGHT   MARGIN.TOP   MARGIN.BOTTOM)

const g = svg.append("g")
  .attr("transform", `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`);


const x = d3.scaleBand()
  .range([0, WIDTH])
  .paddingInner(0.3)
  .paddingOuter(0.2)
  .domain(data.map(d => d.month))


const y = d3.scaleLinear()
  .range([HEIGHT, 0])
  .domain([0, d3.max(data, d => d.profit)])

const xAxisGroup = g.append("g")
  .attr("class", "x axis")
  .attr("transform", `translate(0, ${HEIGHT})`)

const yAxisGroup = g.append("g")
  .attr("class", "y axis")

const xAxisCall = d3.axisBottom(x)
xAxisGroup.call(xAxisCall)
  .selectAll("text")
  .attr("y", "10")
  .attr("x", "-5")
  .attr("text-anchor", "end")
  .attr("transform", "rotate(-40)")

const yAxisCall = d3.axisLeft(y)
  .ticks(3)
  .tickFormat(d => "$"   d)

yAxisGroup.call(yAxisCall);

// contains all the bars - we will apply a clip path to this
const barsGroup = g.append('g')
  .attr('class', 'bars');
// the group which gets transformed by the zooming
const zoomGroup = barsGroup.append('g')
  .attr('class', 'zoom');


const monthGroups = zoomGroup.selectAll('g.month')
  .data(data)
  .enter()
  .append('g')
  .attr('class', 'month');

const rectsProfit = monthGroups
  .append("rect")
  .attr("class", "profit")
  .attr("y", d => y(d.profit))
  .attr("x", (d) => x(d.month))
  .attr("width", 0.5 * x.bandwidth())
  .attr("height", d => HEIGHT - y(d.profit))
  .attr("fill", "grey");

const rectsRevenue = monthGroups
  .append("rect")
  .attr("class", "revenue")
  .attr("y", d => y(d.revenue))
  .attr("x", (d) => x(d.month)   0.5 * x.bandwidth())
  .attr("width", 0.5 * x.bandwidth())
  .attr("height", d => HEIGHT - y(d.revenue))
  .attr("fill", "red");

// add clip paths to the svg to hide overflow when zooming/panning
const defs = svg.append('defs');
const barsClipPath = defs.append('clipPath')
  .attr('id', 'bars-clip-path')
  .append('rect')
  .attr('x', 0)
  .attr('y', 0)
  .attr('width', WIDTH)
  .attr('height', 400);

// apply clip path to group of bars
barsGroup.attr('clip-path', 'url(#bars-clip-path)');
// apply clip path to the axis group
xAxisGroup.attr('clip-path', 'url(#bars-clip-path)');

// the zooming & panning
const zoom = d3.zoom()
  // here you can limit the min/max zoom. In this case it cannot shrink by more than half the size
  .scaleExtent([0.5, Infinity])
  .on("zoom", ({
    transform
  }) => {
    // the scaling/zooming factor: scaleFactor = 2 means double the size
    const scaleFactor = transform.k;
    // the x offset of the bars after zooming and panning (this depends on the x position of the cursor when zooming)
    const xOffset = transform.x;
    // horizontally move and then scale the bars
    zoomGroup.attr('transform', `translate(${xOffset} 0) scale(${scaleFactor} 1)`);

    // also update the viewport range of the x axis
    x.range([xOffset, WIDTH * scaleFactor   xOffset]);
    xAxisGroup.call(xAxisCall)
  });

// listen for zoom events on the entire drawing
svg.call(zoom);

.chart-container {
  width: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Multi Series Span Chart (Vertical)</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <div class="chart-container">
  </div>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script type="text/javascript" src="main.js"></script>
</body>

</html>

替代實施

此解決方案的一個缺點是 x 軸（x 比例）只是根據縮放進行拉伸。軸刻度的數量和粒度（“一月”-“十二月”）不會改變。

您可以嘗試將 X 域的離散月份值轉換為日期并創建連續的時間尺度。在這種情況下，您可以使用transform.rescaleX(x)( docs ) 來操作 x 比例的域，并且軸刻度將根據縮放比例發生變化。這發生在您提供的原始示例中。

uj5u.com熱心網友回復：

你有兩個問題。

您正在設定剪輯路徑但不使用它。為您的欄附加一個組并在此處設定其剪輯路徑屬性：

var rect = layer.append('g')
        .attr('clip-path', 'url(#clip)') //here
        .selectAll("rect")

除非您也使用 bar 類，否則您的縮放選擇呼叫將包括剪輯路徑矩形：

svg.selectAll(".chart rect.bar")
    .attr("transform", "translate("   d3.event.translate[0]   ",0)scale("   d3.event.scale   ", 1)");

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/422081.html

標籤：

上一篇：D3地圖圖例問題

下一篇：D3.js軸刻度標簽旋轉基于標簽和欄的寬度