Question

我试图理解如何在滚动显示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问题？

Answer 1

只需将svg文本节点添加为svg元素的最后一个元素，因此它将呈现在所有其他元素之上。然后，您可以收听内容div上的scroll事件，并调整文本节点的y属性。

这是一个例子。

＆＃13;

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)

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: