如何在保持svg的一部分固定位置的情况下滚动d3元素？

Question

如何在保持svg的一部分固定位置的情况下滚动d3元素？

3

我正在尝试理解如何在包含div内部滚动时，保持d3可视化的某个特定部分不滚动。

下面是一个简单的示例，您可以在这个jsfiddle中查看: https://jsfiddle.net/51qs8q94/。

<body>
        <div class="container">
            <div id="viz" class="content"></div>            
        </div>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script>
            var svg = d3.select("#viz")
                    .append("svg")
                    .attr("width", 300)
                    .attr("height", 300);
            svg.append("text")
                    .attr("x", 40)
                    .attr("y", 10)
                    .attr("dy", ".35em")
                    .text("LABEL");
            svg.append("rect")
                    .style("stroke", "green")
                    .style("fill", "green")
                    .attr("x", 50)
                    .attr("y", 25)
                    .attr("width", 25)
                    .attr("height", 25);
            svg.append("rect")
                    .style("stroke", "yellow")
                    .style("fill", "yellow")
                    .attr("x", 50)
                    .attr("y", 50)
                    .attr("width", 25)
                    .attr("height", 25);
            svg.append("rect")
                    .style("stroke", "green")
                    .style("fill", "green")
                    .attr("x", 50)
                    .attr("y", 75)
                    .attr("width", 25)
                    .attr("height", 25);
            svg.append("rect")
                    .style("stroke", "yellow")
                    .style("fill", "yellow")
                    .attr("x", 50)
                    .attr("y", 100)
                    .attr("width", 25)
                    .attr("height", 25);
            svg.append("rect")
                    .style("stroke", "green")
                    .style("fill", "green")
                    .attr("x", 50)
                    .attr("y", 125)
                    .attr("width", 25)
                    .attr("height", 25);
            svg.append("rect")
                    .style("stroke", "yellow")
                    .style("fill", "yellow")
                    .attr("x", 50)
                    .attr("y", 150)
                    .attr("width", 25)
                    .attr("height", 25);
            svg.append("rect")
                    .style("stroke", "green")
                    .style("fill", "green")
                    .attr("x", 50)
                    .attr("y", 175)
                    .attr("width", 25)
                    .attr("height", 25);
            svg.append("rect")
                    .style("stroke", "yellow")
                    .style("fill", "yellow")
                    .attr("x", 50)
                    .attr("y", 200)
                    .attr("width", 25)
                    .attr("height", 25);
        </script>        
    </body>

CSS

.container{
    float:left;
    height: 250px;
    width:250px; 
    padding:3px; 
    background:#FFA500;
}
.content{
    height:224px;
    overflow:auto;
    background:#FFFFFF;
}

我希望LABEL保持在顶部可见，并使D3矩形在其下方上下滚动。这是否可能？如果是，如何实现？这是CSS问题还是SVG问题？

- sail0r

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DavidDomain · Accepted Answer

只需将svg文本节点作为svg元素的最后一个元素添加即可，这样它将渲染在其他所有元素的上方。然后您可以监听内容div上的scroll事件并调整文本节点的y属性。

以下是示例。

var content = document.getElementById('viz');

var svg = d3.select("#viz")
.append("svg")
.attr("width", 300)
.attr("height", 300);
svg.append("rect")
  .style("stroke", "green")
  .style("fill", "green")
  .attr("x", 50)
  .attr("y", 25)
  .attr("width", 25)
  .attr("height", 25);
svg.append("rect")
  .style("stroke", "yellow")
  .style("fill", "yellow")
  .attr("x", 50)
  .attr("y", 50)
  .attr("width", 25)
  .attr("height", 25);
svg.append("rect")
  .style("stroke", "green")
  .style("fill", "green")
  .attr("x", 50)
  .attr("y", 75)
  .attr("width", 25)
  .attr("height", 25);
svg.append("rect")
  .style("stroke", "yellow")
  .style("fill", "yellow")
  .attr("x", 50)
  .attr("y", 100)
  .attr("width", 25)
  .attr("height", 25);
svg.append("rect")
  .style("stroke", "green")
  .style("fill", "green")
  .attr("x", 50)
  .attr("y", 125)
  .attr("width", 25)
  .attr("height", 25);
svg.append("rect")
  .style("stroke", "yellow")
  .style("fill", "yellow")
  .attr("x", 50)
  .attr("y", 150)
  .attr("width", 25)
  .attr("height", 25);
svg.append("rect")
  .style("stroke", "green")
  .style("fill", "green")
  .attr("x", 50)
  .attr("y", 175)
  .attr("width", 25)
  .attr("height", 25);
svg.append("rect")
  .style("stroke", "yellow")
  .style("fill", "yellow")
  .attr("x", 50)
  .attr("y", 200)
  .attr("width", 25)
  .attr("height", 25);
var label = svg.append("text")
.attr("x", 40)
.attr("y", 10)
.attr("dy", ".35em")
.text("LABEL");

content.addEventListener('scroll', function(evt) {
  label.node().setAttribute('y', 10 + this.scrollTop);
}, false)

.container{
  float:left;
  height: 250px;
  width:250px; 
  padding:3px; 
  background:#FFA500;
}
.content{
  height:224px;
  overflow:auto;
  background:#FFFFFF;
}

<script src="https://d3js.org/d3.v3.min.js"></script>
<div class="container">
  <div id="viz" class="content"></div>            
</div>