使用d3.js滚动时如何将x轴保持在固定位置？

Question

我有一个d3矩阵，有一个x和y轴。我的y轴非常长，所以我想在滚动时仍能看到我的x轴。我希望这个职位“固定”。但添加.style（“位置”，“固定”）似乎并没有成功。简单来说，我想做excel在冻结行/列时所做的事情。

我有以下代码：

  var columnLabels = svg.append("g")
  .selectAll(".columnLabelg")
  .data(columnLabel)
  .enter()
  .append("text")
  .text(function(d) { return d; })
  .attr("x", function(d, i) { return i * cellSize; })
  .attr("y", -1)
  .style("text-anchor", "right")
  .attr("transform", function(d, i) { 
      return "translate(" + i + ",-6)"
             + "rotate(300 "+ i * cellSize + " " + (-6) +")"; })


  .attr("class",  function (d,i) { return "columnLabel mono c"+i;} )
  .on("mouseover", function(d) {d3.select(this).classed("text-hover",true);})
  .on("mouseout" , function(d) {d3.select(this).classed("text-hover",false);}) 
  ;

Answer 1

这样做的一个好方法是创建一个标题div，然后在整个滚动过程中在屏幕顶部粘贴。您可以在其中显示您喜欢的任何内容，保持粘性，并且如果您使用类似scrollmagic的内容，则通常会滚动浏览矩阵的其余部分，这需要一些额外的JavaScript。

例如，如果您创建一个容器div，在里面添加列标签，并将其固定到屏幕顶部，那么事情应该可行。

例如：

var labelContainer = d3.select("div.label-container")

//Let's pretend that you've create the labels thus:
var columnLabels = labelContainer
  .selectAll(".columnLabel")
  .data(columnLabel)
  .enter()
  .append("div")
  .attr("class", "label")


//Now let's create a scrollmagic scene, the duration of which will let you set the length during which the element is sticky on scroll.

var controller = new ScrollMagic.Controller();

$(function() { // wait for document ready

  // build scene
  var scene = new ScrollMagic.Scene({
      triggerElement: "#trigger1",
      duration: 300
    })
    .setPin("#pin1")
    .addIndicators({
      name: "1 (duration: 300)"
    }) // add indicators (requires plugin)
    .addTo(controller);
});

<div id="trigger1" class="label-container">

  <div class="label"></div>
  <div class="label"></div>

</div>
<div class="svg-container">
  <svg class="svg-viz"></svg>
</div>

也就是说，除了加载d3之外，你还想加载Scrollmagic和jquery库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>

此外，您可能希望添加指示符以使用以下scrollmagic库向您显示场景的开始和结束位置：

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>

你可以在这里阅读更多关于scrollmagic pinning的内容：http://scrollmagic.io/examples/basic/simple_pinning.html