D3.js：無法使Y軸可滾動且X軸固定

我正在嘗試重新創建

如您所見，y 軸被截斷，而 x 軸未固定或不正確可見。根據上面鏈接的示例，我唯一能看到控制滾動的是overflow-y，我已將其添加到我的 svg 中：

let chart = d3.select("#chart2")
    .append("svg")
    .attr("width", width   margin.left   margin.right)
    .attr("height", height   margin.top   margin.bottom)
    .append("g")
    .style("overflow-y", "scroll")
    .attr("transform", "translate("   margin.left   ","   margin.top   ")");

這不起作用。我做錯了什么，如何用我的代碼復制固定的 x 軸和可滾動的 y 軸示例？

在這里實時部署

uj5u.com熱心網友回復：

當您仔細查看您發布的示例時，您會發現他們使用了兩個 (!) SVG。一種用于圖表，一種用于軸。從那開始已經解決了很大一部分問題。

接下來是 SVG 不可滾動。同樣，查看示例會告訴您overflow: scroll實際位于 上div，而不是在 SVG 上。

const margin = {
  top: 20,
  right: 20,
  bottom: 30,
  left: 150
};
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;


let chart = d3.select("#chart2")
  .append("div")
  .classed("chart", true)
  .append("svg")
  .attr("width", width   margin.left   margin.right)
  .attr("height", height   margin.top   margin.bottom)
  .append("g")
  .style("overflow-y", "scroll")
  .attr("transform", "translate("   margin.left   ","   margin.top   ")");

// Make sure to create a separate SVG for the XAxis
let axis = d3.select("#chart2")
  .append("svg")
  .attr("width", width   margin.left   margin.right)
  .attr("height", 40)
  .append("g")
  .attr("transform", "translate("   margin.left   ", 0)");


// Load the data
d3.csv("https://raw.githubusercontent.com/thedivtagguy/daily-data/master/dd_cropYieldsD3/cropYieldsD3/data/land_use.csv").then(function(data) {
  // console.log(data);
  const years = Array.from(new Set(data.map(d => d.year)));
  const countries = Array.from(new Set(data.map(d => d.entity)));

  // Sort countries based on change in land use in descending order
  const sortedCountries = countries.sort((a, b) => {
    const aChange = data.filter(d => d.entity === a).map(d => d.change).reduce((a, b) => a   b);
    const bChange = data.filter(d => d.entity === b).map(d => d.change).reduce((a, b) => a   b);
    return aChange - bChange;
  });

  const x = d3.scaleBand()
    .range([0, width])
    .domain(years)
    .padding(0.1);

  const y = d3.scaleBand()
    .range([height * 6, 0])
    .domain(sortedCountries)
    .padding(0.1);

  // Only 10 years 
  axis.call(d3
      .axisBottom(x)
      .tickValues(years.filter((d, i) => !(i % 10))))
    .selectAll("text")
    .style("color", "black")
    .style("position", "fixed")
    .attr("transform", "translate(-10,10)rotate(-45)")
    .style("text-anchor", "end");

  chart.append("g")
    .call(d3.axisLeft(y))
    .selectAll("text")
    .style("color", "black")
    .attr("transform", "translate(-10,0)")
    .style("text-anchor", "end");

  const colorScale = d3.scaleSequential()
    .domain([0, d3.max(data, d => d.change)])
    .interpolator(d3.interpolateInferno);


  // add the squares
  chart.selectAll()
    .data(data, function(d) {
      return d.year   ':'   d.entity;
    })
    .join("rect")
    .attr("x", function(d) {
      return x(d.year)
    })
    .attr("y", function(d) {
      return y(d.entity)
    })
    .attr("rx", 4)
    .attr("ry", 4)
    .attr("width", x.bandwidth())
    .attr("height", y.bandwidth())
    .style("fill", function(d) {
      return colorScale(d.change)
      console.log(d.change);
    })
    .style("stroke-width", 4)
    .style("stroke", "none")
    .style("opacity", 0.8)

});

#chart2 .chart {
  width: 960px;
  max-height: 470px;
  overflow-y: scroll;
  overflow-x: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<div id="chart2"></div>

標籤：javascript html css d3.js

上一篇：使用d3應用Y軸時，會引發錯誤

下一篇：如何在D3.js中創建具有不等刻度間隔的軸