个人中心
gpt4 book ai didi

javascript - JS : Working with Sliders

转载 作者：行者123 更新时间：2023-12-02 13:47:04 24 4
gpt4 key购买 nike

我正在尝试使用 d3.js 创建一个可以排序并根据 slider 输入动态更改高度的柱形图。在使用 slider 时，我在两个方面遇到了一些麻烦。

(1) 目前，页面如下所示: enter image description here

我不知道如何重新定位 slider ，使其位于条形图的右侧而不是下方。我尝试使用 style 更改 slider 的 div 标签，但这没有改变任何内容。

(2) 作为 JS 的初学者，我将不胜感激有关如何根据 slider 输入动态更改条形图高度的任何建议。如果 slider 输入越大，条形图高度就应该越大。

最佳答案

很难回答这个问题，因为我不知道您真正的最终目标(请参阅上面的评论)，但这是一种展示您追求的目标的方法:

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
  <link rel="stylesheet" href="https://rawgit.com/sujeetsr/d3.slider/master/d3.slider.css" />
  <script src="https://rawgit.com/sujeetsr/d3.slider/master/d3.slider.js"></script>
</head>

<body>
  <label> <input type="checkbox"> Sort values</label>
  <div id="testslider"></div>

  <style>
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      position: relative;
    }
    
    .axis text {
      font: 8px sans-serif;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    
    .bar {
      fill: green;
      fill-opacity: .9;
    }
    
    .x.axis path {
      display: none;
    }
    
    label {
      position: absolute;
      top: 10px;
      right: 10px;
    }
    
    #testslider {
      position: absolute;
      top: 25px;
      right: 10px;
      width: 200px;
      margin-left: 30px;
    }
  </style>

  <script type="text/javascript">
    var margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
      },
      width = 750 - margin.left - margin.right,
      height = 375 - margin.top - margin.bottom;

    var formatPercent = d3.format(".0");

    var x = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1, 1);

    var y = d3.scale.linear()
      .range([height, 0]);

    var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

    var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      //.tickFormat(formatPercent);

    var svg = d3.select("body").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 + ")");

    var testerCallback = function() {
      var val = slider.value();
      svg.selectAll(".bar")
        .data(origData.map(function(d){
          return {
            ranking: d.ranking * val,
            drug: d.drug
          };
        }))
        .attr("y", function(d) {
          return y(d.ranking);
        })
        .attr("height", function(d) {
          return height - y(d.ranking);
        });
    };
    
    var data = [{
      drug: "A",
      ranking: 0.1
    }, {
      drug: "B",
      ranking: 0.3
    }, {
      drug: "C",
      ranking: 0.3
    }, {
      drug: "D",
      ranking: 0.5
    }, {
      drug: "E",
      ranking: 0.5
    }, {
      drug: "F",
      ranking: 0.4
    }];

    var origData;
    //d3.csv("data.tsv", function(error, data) {
      
      data.forEach(function(d) {
        d.ranking = +d.ranking;
      });

      origData = data;
  
      x.domain(data.map(function(d) {
        return d.drug;
      }));

      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

      svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 5)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Score (Higher is better)");

      svg.selectAll(".bar")
        .data(data)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", function(d) {
          return x(d.drug);
        })
        .attr("width", x.rangeBand())
        .attr("y", function(d) {
          return y(d.ranking);
        })
        .attr("height", function(d) {
          return height - y(d.ranking);
        });

      d3.select("input").on("change", change);

      function change() {
        var x0 = x.domain(data.sort(this.checked ?
              function(a, b) {
                return b.ranking - a.ranking;
              } :
              function(a, b) {
                return d3.ascending(a.drug, b.drug);
              })
            .map(function(d) {
              return d.drug;
            }))
          .copy();
        svg.selectAll(".bar")
          .sort(function(a, b) {
            return x0(a.drug) - x0(b.drug);
          });
        var transition = svg.transition().duration(750),
          delay = function(d, i) {
            return i * 50;
          };
        transition.selectAll(".bar")
          .delay(delay)
          .attr("x", function(d) {
            return x0(d.drug);
          });
        transition.select(".x.axis")
          .call(xAxis)
          .selectAll("g")
          .delay(delay);
      }

    //});

    var tickFormatter = function(d) {
      return d === 0 ? "not important" : "very important";
    };

    var slider = d3.slider().min(0).max(1).value(1).ticks(1).showRange(true).tickFormat(tickFormatter).callback(testerCallback);
    d3.select('#testslider').call(slider);
    d3.selectAll(".tick>text").style("text-anchor", "start");
    d3.selectAll(".tick:last-of-type>text").style("text-anchor", "end");
  </script>
</body>

</html>

关于javascript - JS : Working with Sliders，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41311602/

24 4 0
文章推荐： JavaScript 返回未按预期工作
文章推荐： python-3.x - 用于两步 ssh 隧道的 Jupyter notebook SSH 隧道
文章推荐： bash - 如何在使用 Plink 执行的 bash 文件中接受用户输入？
文章推荐： javascript - JSON 数据作为字符串工作，但在对象时抛出内部错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com