Question

我正在尝试使用d3.js创建一个柱形图，可以对其进行排序并根据滑块输入动态更改高度。在使用滑块时，我在两个问题上遇到了一些麻烦。

（1）目前，该页面如下所示：

我无法弄清楚如何重新定位滑块，使其位于条形图的右侧而不是下方。我尝试使用样式更改滑块的div标签，但没有改变任何内容。

（2）作为JS的初学者，我很感激有关如何根据滑块输入动态更改条形图高度的任何建议。如果滑块输入较大，则条形图高度应该更大。

Answer 1

很难回答这个问题，因为我不知道你真正的最终目标（见上面的评论），但这是展示你的目标的一种方法：

＆＃13;

<!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>

＆＃13;

JS：使用滑块

1 个答案: