Question

我正在开发一个响应式D3滑块，它只允许定义日期值 - 如果我不改变窗口大小，滑块可以工作。问题是：如果窗口大小改变，我的函数resize_slider（）不会调整滑块的大小。任何想法以及更改滑块宽度的最佳方法是什么？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

        <style type="text/css">
            .axis_slider .domain {
              fill: none;
              stroke: #000;
              stroke-opacity: .3;
              stroke-width: 10px;
              stroke-linecap: round;
            }

            .axis_slider .halo {
              fill: none;
              stroke: #ddd;
              stroke-width: 8px;
              stroke-linecap: round;
            }

            .handle {
              fill: #fff;
              stroke: #000;
              stroke-opacity: .5;
              stroke-width: 1.25px;
              pointer-events: none;
            }

        </style>

    </head>


    <body>


        <div class="matrixchart">
            <div id="scatterchart_slider"><div id="playbutton" style="position: absolute; left: 20px; top:30px;"><img src="images/play.gif" width="50px" height=50px; onmouseover="this.src='images/play2.gif';" onmouseout="this.src='images/play.gif';"></div></div> 
        </div>



        <script type="text/javascript">

            var date_values=[];
            date_values[0] = new Date(2016,9,31);
            date_values[1] = new Date(2016,10,30);
            date_values[2] = new Date(2016,11,30);
            date_values[3] = new Date(2017,0,31);
            var current_nr_date_values = date_values.length-1;

            var play_width = 50;
            var padding = 50;
            var w = window.innerWidth - padding;


            var margin = {top: 0, right: padding*2, bottom: 300, left: padding*2},
                height_slider = 100;

            var slider_plays = false;
            var slider_play_newstart = false;

            var slider_x = d3.time.scale()
                .domain([date_values[0], date_values[date_values.length-1]])
                .range([0, w - 4*padding])
                .clamp(true); 

            var brush = d3.svg.brush()
                .x(slider_x)
                .on("brush", brushed)
                .on("brushend", brushend);

            var svg_slider = d3.select("#scatterchart_slider").append("svg")
                .attr("width", w-play_width)
                .attr("height", height_slider)
              .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            svg_slider.append("g")
                .attr("class", "x axis_slider")
                .attr("transform", "translate(0," + height_slider / 2 + ")")
                .call(d3.svg.axis()
                  .scale(slider_x)
                  .tickValues(date_values)
                  .orient("bottom")
                  .tickFormat(d3.time.format("%b %Y"))
                  .tickPadding(12))
                  .select(".domain")
                  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
                  .attr("class", "halo");

            var slider = svg_slider.append("g")
                .attr("class", "slider")
                .call(brush);

            slider.selectAll(".extent,.resize")
                .remove();

            slider.select(".background")
                .attr("height", height_slider);

            var handle = slider.append("circle")
                .attr("class", "handle")
                .attr("transform", "translate(0," + height_slider / 2 + ")")
                .attr("r", 9);

            slider
                .call(brush.extent([date_values[current_nr_date_values], date_values[current_nr_date_values]]))
                .call(brush.event);


            function brushed() {
              var value = brush.extent()[0];

              if (d3.event.sourceEvent) { 
                value = slider_x.invert(d3.mouse(this)[0]);
                brush.extent([value, value]);
              }

              handle.attr("cx", slider_x(value));
            }

            function brushend() {
               if (!d3.event.sourceEvent) {
                 return; // only transition after input
               }

               var value = brush.extent()[0];                    
               brush.extent([value, value]);

               d3.select(this)
                 .transition()
                 .call(brush.event);                           

               function getRoundedDate_ID(d) {
                   nearest_date_nr = 0
                   for (var i = 1; i<=date_values.length-1; i++) { 
                       if ((Math.abs(d.getTime() - new Date(date_values[i]).getTime())) < (d.getTime() - new Date(date_values[nearest_date_nr]).getTime())) {nearest_date_nr = i;}
                   }       
                   return nearest_date_nr;
               }

               d3.select(this)
                 .transition()
                 .duration(1000)
                 .call(brush.extent(brush.extent().map(function(d) { 
                    var roundedDate= new Date(d);
                    current_nr_date_values = getRoundedDate_ID(d);
                    return date_values[current_nr_date_values]
                    })))

                 .call(brush.event);  
             }      


            function resize_slider(){
                w = window.innerWidth - padding;
                svg_slider.attr("width", w-play_width);
            }            

            d3.select(window).on('resize', resize_slider);

        </script>  
</body>
</html>

Answer 1

主要问题是，在调整大小时，您将宽度属性分配给g元素，而不是整个svg。你可以解决这个问题，拆分svg和g元素的定义。

var svg = d3.select("#scatterchart_slider").append("svg")
    .attr("width", w - play_width)
    .attr("height", height_slider)
var svg_slider = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

关于调整大小：

function resize_slider() {
  w = window.innerWidth - padding;
  svg.attr("width", w - play_width);
}

但设置svg的宽度并不是为了让可视化响应，因为你必须根据当前宽度构建一个新的比例并更新图形。

按照您的方法，您需要执行一些重构，如updated fiddle所示，以重新调整大小时的滑块。您还可以检查一些其他选项，以纯CSS方式响应SVG，如here所示。

响应D3平滑滑块 - 在窗口大小调整滑块宽度

1 个答案: