我试图了解如何使 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>
CSS
.container{
float:left;
height: 250px;
width:250px;
padding:3px;
background:#FFA500;
}
.content{
height:224px;
overflow:auto;
background:#FFFFFF;
}
我想要的是 LABEL 保持在顶部可见，并且 D3 rects 在其下方上下滚动。这可能吗？如果是这样，怎么做？这是CSS的问题吗？ SVG 问题？
最佳答案
只需将 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>关于css - 如何在将 svg 的一部分保持在固定位置的同时滚动 d3 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34640946/