Question

我希望能够创建多个不同颜色的滑块。我在网上找到的一个建议是在我的CSS文件中为每种颜色创建多个类，并在定义滑块时调用所需的类。

目前尚不清楚如何在Javascript中覆盖CSS以及如何相应地更改我的html文件。请在下面找到代码：

<body>
 <div id="testslider"></div>
 <script>
  var slider = d3.slider().min(0).max(1).value(1).ticks(1).showRange(true);
  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>

输出应如下所示：

Answer 1

您需要添加div并更改填充颜色，这是一个示例。

＆＃13;

d3.slider = function module() {
  "use strict";

  var div, min = 0,
    max = 100,
    svg, svgGroup, value, classPrefix, axis,
    height = 20,
    rect,
    rectHeight = 5,
    tickSize = 6,
    margin = {
      top: 25,
      right: 25,
      bottom: 15,
      left: 25
    },
    ticks = 0,
    tickValues, scale, tickFormat, dragger, width,
    range = false,
    callbackFn, stepValues, focus;

  function slider(selection) {
    selection.each(function() {
      div = d3.select(this).classed('d3slider', true);
      width = parseInt(div.style("width"), 7.5) - (margin.left + margin.right);

      value = value || min;
      scale = d3.scale.linear().domain([min, max]).range([0, width])
        .clamp(true);

      // SVG 
      svg = div.append("svg")
        .attr("class", "d3slider-axis")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left +
          "," + margin.top + ")");

      // Range rect
      svg.append("rect")
        .attr("class", "d3slider-rect-range")
        .attr("width", width)
        .attr("height", rectHeight);

      // Range rect 
      if (range) {
        svg.append("rect")
          .attr("class", "d3slider-rect-value")
          .attr("width", scale(value))
          .attr("height", rectHeight);
      }

      // Axis      
      var axis = d3.svg.axis()
        .scale(scale)
        .orient("bottom");

      if (ticks != 0) {
        axis.ticks(ticks);
        axis.tickSize(tickSize);
      } else if (tickValues) {
        axis.tickValues(tickValues);
        axis.tickSize(tickSize);
      } else {
        axis.ticks(0);
        axis.tickSize(0);
      }
      if (tickFormat) {
        axis.tickFormat(tickFormat);
      }

      svg.append("g")
        .attr("transform", "translate(0," + rectHeight + ")")
        .call(axis)
        //.selectAll(".tick")
        //.data(tickValues, function(d) { return d; })
        //.exit()
        //.classed("minor", true);

      var values = [value];
      dragger = svg.selectAll(".dragger")
        .data(values)
        .enter()
        .append("g")
        .attr("class", "dragger")
        .attr("transform", function(d) {
          return "translate(" + scale(d) + ")";
        })
      var displayValue = null;
      if (tickFormat) {
        displayValue = tickFormat(value);
      } else {
        displayValue = d3.format(",.2f")(value);
      }

      dragger.append("text")
        .attr("x", 0)
        .attr("y", -15)
        .attr("text-anchor", "middle")
        .attr("class", "draggertext")
        // .text(displayValue);

      dragger.append("circle")
        .attr("class", "dragger-outer")
        .attr("r", 10)
        .attr("transform", function(d) {
          return "translate(0,6)";
        });

      dragger.append("circle")
        .attr("class", "dragger-inner")
        .attr("r", 4)
        .attr("transform", function(d) {
          return "translate(0,6)";
        });


      // Enable dragger drag 
      var dragBehaviour = d3.behavior.drag();
      dragBehaviour.on("drag", slider.drag);
      dragger.call(dragBehaviour);

      // Move dragger on click 
      svg.on("click", slider.click);

    });
  }

  slider.draggerTranslateFn = function() {
    return function(d) {
      return "translate(" + scale(d) + ")";
    }
  }

  slider.click = function() {
    var pos = d3.event.offsetX || d3.event.layerX;
    slider.move(pos);
  }

  slider.drag = function() {
    var pos = d3.event.x;
    slider.move(pos + margin.left);
  }

  slider.move = function(pos) {
    var l, u;
    var newValue = scale.invert(pos - margin.left);
    // find tick values that are closest to newValue
    // lower bound
    if (stepValues != undefined) {
      l = stepValues.reduce(function(p, c, i, arr) {
        if (c < newValue) {
          return c;
        } else {
          return p;
        }
      });

      // upper bound
      if (stepValues.indexOf(l) < stepValues.length - 1) {
        u = stepValues[stepValues.indexOf(l) + 1];
      } else {
        u = l;
      }
      // set values
      var oldValue = value;
      value = ((newValue - l) <= (u - newValue)) ? l : u;
    } else {
      var oldValue = value;
      value = newValue;
    }
    var values = [value];

    // Move dragger
    svg.selectAll(".dragger").data(values)
      .attr("transform", function(d) {
        return "translate(" + scale(d) + ")";
      });

    var displayValue = null;
    if (tickFormat) {
      displayValue = tickFormat(value);
    } else {
      displayValue = d3.format(",.2f")(value);
    }
    svg.selectAll(".dragger").select("text")
      //.text(displayValue);

    if (range) {
      svg.selectAll(".d3slider-rect-value")
        .attr("width", scale(value));
    }

    if (callbackFn) {
      callbackFn(slider);
    }
  }

  // Getter/setter functions
  slider.min = function(_) {
    if (!arguments.length) return min;
    min = _;
    return slider;
  };

  slider.max = function(_) {
    if (!arguments.length) return max;
    max = _;
    return slider;
  };

  slider.classPrefix = function(_) {
    if (!arguments.length) return classPrefix;
    classPrefix = _;
    return slider;
  }

  slider.tickValues = function(_) {
    if (!arguments.length) return tickValues;
    tickValues = _;
    return slider;
  }

  slider.ticks = function(_) {
    if (!arguments.length) return ticks;
    ticks = _;
    return slider;
  }

  slider.stepValues = function(_) {
    if (!arguments.length) return stepValues;
    stepValues = _;
    return slider;
  }

  slider.tickFormat = function(_) {
    if (!arguments.length) return tickFormat;
    tickFormat = _;
    return slider;
  }

  slider.value = function(_) {
    if (!arguments.length) return value;
    value = _;
    return slider;
  }

  slider.showRange = function(_) {
    if (!arguments.length) return range;
    range = _;
    return slider;
  }

  slider.callback = function(_) {
    if (!arguments.length) return callbackFn;
    callbackFn = _;
    return slider;
  }

  slider.setValue = function(newValue) {
    var pos = scale(newValue) + margin.left;
    slider.move(pos);
  }

  slider.mousemove = function() {
    var pos = d3.mouse(this)[0];
    var val = slider.getNearest(scale.invert(pos), stepValues);
    focus.attr("transform", "translate(" + scale(val) + ",0)");
    focus.selectAll("text").text(val);
  }

  slider.getNearest = function(val, arr) {
    var l = arr.reduce(function(p, c, i, a) {
      if (c < val) {
        return c;
      } else {
        return p;
      }
    });
    var u = arr[arr.indexOf(l) + 1];
    var nearest = ((value - l) <= (u - value)) ? l : u;
    return nearest;
  }

  slider.destroy = function() {
    div.selectAll('svg').remove();
    return slider;
  }

  return slider;

};

＆＃13;

.d3slider {
  z-index: 2;
  height: 100%;
  background: none;
}

.d3slider-rect-range {
  fill: #777;
  stroke: none;
}

.d3slider-rect-value {
  fill: #006EE3;
  stroke: none;
}

.d3slider-axis {
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.d3slider-axis path {
  display: none;
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.d3slider-axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.d3slider text {
  font: 10px sans-serif;
}

.tick.minor text {
  display: none;
}

.tick line {
  stroke-width: 1;
}

.tick.minor line {
  stroke-width: 1;
  stroke: #bbb;
}

.dragger rect {
  fill: #71ACE3;
  stroke: none;
  z-index: 3;
}

.dragger line {
  stroke: #aa0000;
  fill: none;
}

.dragger-outer {
  fill: #fff;
  stroke: #000;
}

.dragger-inner {
  fill: #B30424;
  stroke: none;
}

.min-marker line {
  stroke: #aa0000;
  fill: none;
}

.overlay {
  fill: none;
  pointer-events: all;
  z-index: 1;
}
#testslider2 .d3slider-rect-value {
  fill: #000;
}

＆＃13;

<link rel="stylesheet" href="https://rawgit.com/sujeetsr/d3.slider/master/d3.slider.css" />
<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>
<script src="https://rawgit.com/sujeetsr/d3.slider/master/d3.slider.js"></script>
<div id="testslider"></div>
<div id="testslider2"></div>
<script>
  var slider = d3.slider().min(0).max(1).value(1).ticks(1).showRange(true);
  d3.select('#testslider').call(slider);
  var slider2 = d3.slider().min(0).max(1).value(1).ticks(1).showRange(true);
  d3.select('#testslider2').call(slider2);
  d3.selectAll(".tick>text").style("text-anchor", "start");
  d3.selectAll(".tick:last-of-type>text").style("text-anchor", "end");

</script>

＆＃13;

Answer 2

您可以通过将其括号添加到key：

来单独使用CSS

在您的HTML中：

div

使用Javascript：

 <div id="testslider"></div>
 <div id="testslider2"></div>

CSS：

  var slider = d3.slider().min(0).max(1).value(1).ticks(1).showRange(true);
  d3.select('#testslider').call(slider);

  var slider2 = d3.slider();
  d3.select('#testslider2').call(slider2);

更新了fiddle。

运行代码：

#testslider .d3slider-rect-value {
  fill: #006EE3;
  stroke: none;
}

#testslider2 .d3slider-rect-value {
  fill: black;
  stroke: none;
}

.d3slider {
  z-index: 2;
  height: 100%;
  background: none;
}

.d3slider-rect-range {
  fill: #777;
  stroke: none;
}

#testslider .d3slider-rect-value {
  fill: #006EE3;
  stroke: none;
}

#testslider2 .d3slider-rect-value {
  fill: black;
  stroke: none;
}



.d3slider-axis {
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.d3slider-axis path {
  display: none;
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.d3slider-axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.d3slider text {
  font: 10px sans-serif;
}

.tick.minor text {
  display: none;
}

.tick line {
  stroke-width: 1;
}

.tick.minor line {
  stroke-width: 1;
  stroke: #bbb;
}

.dragger rect {
  fill: #71ACE3;
  stroke: none;
  z-index: 3;
}

.dragger line {
  stroke: #aa0000;
  fill: none;
}

.dragger-outer {
  fill: #fff;
  stroke: #000;
}

.dragger-inner {
  fill: #B30424;
  stroke: none;
}

.min-marker line {
  stroke: #aa0000;
  fill: none;
}

.overlay {
  fill: none;
  pointer-events: all;
  z-index: 1;
}

更改滑块颜色

2 个答案: