Changing slider color | 易学教程

问题

I want to be able to create multiple sliders of different colors. One of the suggestions I found online was to create multiple classes in my CSS file for each color and to call on the needed class when defining the slider.

It is not clear how to override CSS in Javascript and how to change my html file accordingly. Please find code attached below:

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

The output should look like the following:

回答1:

You can do this with CSS alone by parenting it to the div:

In your HTML:

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

Javascript:

  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);

CSS:

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

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

Updated fiddle.

Running code:

.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;
}

<!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>
    <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);
      d3.selectAll(".tick>text").style("text-anchor", "start");
      d3.selectAll(".tick:last-of-type>text").style("text-anchor", "end");
      
      var slider2 = d3.slider().min(0).max(10).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>
  </body>

</html>

回答2:

You need to add a div and change the fill color here is an example.

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;

};

.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;
}

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

来源：https://stackoverflow.com/questions/41429571/changing-slider-color

标签

javascript

css

d3.js

slider