Question

编辑 - 添加了代码段（底部）

行数是动态的，所以我不知道所需的总高度是多少。我已经将高度发起为800px，但列表可以变长。我有一个overflow-y:scroll值的容器div，但这并没有解决问题。 D3代码和css如下。

有一个滚动条，但如果我向下滚动则不会显示任何行。
图表本身仅测量大约644px（在Photoshop中），因此我不确定它为什么会切断它的位置，或者这是一个单独的问题。

＆＃13;

$(document).ready(function() {
    let randProb = () => {
      let min = 0;
      let max = 1;
      return (Math.random() * (max - min) + min).toFixed(4)
    };
    
    var data = [];
    
    let initData = () => {      
      for (let i=0; i<86; ++i) {
        data.push({
          "attribute":`ATTRIBUTE_${i}`, 
          "probabilityOfMastery":randProb()
        });
      }
//      console.log('data initialized', data);
    };
    

    initData();
    
    
    // set the dimensions and margins of the graph
    var margin = {top: 0, right: 20, bottom: 0, left: 160},
    width = 1220 - margin.left - margin.right,
    height = 800 - margin.top - margin.bottom;
    // set the ranges
    var y = d3.scaleBand()
    .range([height, 0])
    .padding(0.1);
    var x = d3.scaleLinear()
    .range([0, width]);
    // append the svg object to the body of the page
    // append a 'group' element to 'svg'
    // moves the 'group' element to the top left margin
    var svg = d3.select(".analyticsContainer").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");
    // format the data
    data.forEach(function(d) {
    d.probabilityOfMastery = +d.probabilityOfMastery;
    });
    // Scale the range of the data in the domains
    x.domain([0, 1])
    y.domain(data.map(function(d) { return d.attribute; }));
    //y.domain([0, d3.max(data, function(d) { return d.probabilityOfMastery; })]);
    // append the rectangles for the bar chart
    svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")    
    .attr("width", 0 )
    .attr("y", function(d) { return y(d.attribute); })
    .transition()
    .duration(1000)
    //- .delay(function(d, i) {
    //-   return i * 60
    //- })
    .attr("height", y.bandwidth())
    .attr("width", function(d) {return x(d.probabilityOfMastery); } )
    ;
    // add the x Axis
    svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));
    // add the y Axis
    svg.append("g")
    .call(d3.axisLeft(y));
});

＆＃13;

.analyticsWrapper {
  height:calc(100vh - 120px);
  max-height:100%;
  width:100vw;
  max-width: 100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border:1px solid red
}
 
.analyticsContainer {
    font-size: 40px;
    width:100%;
    height:100%;
    justify-content: center;
    overflow-y: scroll;
    padding:3.5vw;
    height:800px;
}

svg {
      width:90vw;
      max-height: 100%;
      max-width: 100%;
      overflow: scroll;
}

.bar {
  fill: #11b9b9;
}

.yAxis text {
   font-weight: 700;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>

<body>
  <div class="analyticsWrapper">
   <div class="analyticsContainer">
   </div>
  </div>
</body>

＆＃13;

d3 v4 - 无法在包含条形图的svg上垂直滚动

0 个答案: