svg 宽度不显示在 d3.js 热图中的左刻度 /

如何解决svg 宽度不显示在 d3.js 热图中的左刻度 /

> 由于左侧 svg 的大小，比例不看起来，它。，我试图增加大小，但在 svg 中没有增加，他总是削减我的侧面比例

 const svg = d3.select(svgRef.current)

  svg.attr("width",width + margin.left + margin.right)
  .attr("height",height + margin.top + margin.bottom)
  .append("g")
  .attr("transform","translate(" + margin.left + "," + margin.top + ")");
     


const x = d3.scaleBand()
          .range([0,width])
          .domain(myGroups)
          .padding(0.1);
          svg.append("g")
             .attr("transform","translate(0," + height + ")")
             .call(d3.axisBottom(x).tickSize(0))
             .select('.domain').remove()
             .attr("font-size",'12')
    
             

const y = d3.scaleBand()
            .range([height,0])
            .domain(go)
            .padding(0.01);
          svg.append("g")
            .style('text-anchor','start')
            .style("font-size",'12')
            .call(d3.axisLeft(y))
            .select('.domain').remove()[![enter image description here][1]][1]

解决方法

我在 svg 元素左侧 30px 处更改了 elemento 的平移比例以渲染 svg

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap" rel="stylesheet">
<div class="demo">
  <div class="site-info">
    <i class="fas fa-lock"></i>
  </div>
  <div class="demo-help">&larr; Click Me!</div>
</div>

<div class="tooltip" id="modal-tooltip">
  <div class="tooltip-top">
    <div class="tooltip-header">
      <div class="tooltip-title">Connection is secure</div>
      <div class="fas fa-times tooltip-close"></div>
    </div>
    <div class="tooltip-content">
      Your information (for example,passwords or credit card numbers) is private when it is sent to this site. <a href="#">Learn more</a>
    </div>
  </div>
  <div class="tooltip-bottom">
    <div class="tooltip-options">
    <div>
      <i class="fas fa-file-invoice"></i>
      Certificate
      <span class="tooltip-option-flag">(Valid)</span>
    </div>
    <div>
      <i class="fas fa-palette" aria-hidden="true"></i>
      Cookies
      <span class="tooltip-option-flag">(16 in use)</span>
    </div>
    <div>
      <i class="fas fa-cog" aria-hidden="true"></i>
      Site settings
    </div>
  </div>
</div>