如何在将 svg 的一部分保持在固定位置的同时滚动 d3 元素？

Question

如何在将 svg 的一部分保持在固定位置的同时滚动 d3 元素？

我试图了解如何防止 d3 可视化的某个部分滚动，而其余的可视化在包含的 div 内滚动。我想要做的一个简单例子是在这个 jsfiddle：https ://jsfiddle.net/51qs8q94/ 。

HTML/JS

<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>

Run Code Online (Sandbox Code Playgroud)

CSS

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

Run Code Online (Sandbox Code Playgroud)

我想要的是 LABEL 在顶部保持可见，并让 D3 矩形在其下方上下滚动。这可能吗？如果是这样，如何？这是一个CSS问题吗？SVG 问题？

Answer 1

Dav*_*ain 6

只需将 svg 文本节点作为最后一个元素添加到 svg 元素，这样它就会呈现在所有其他元素之上。然后你就可以scroll在你的内容 div 上监听事件并调整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)

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，9 月前
查看次数：	5332 次
最近记录：	9 年，9 月前