我希望能够创建多个不同颜色的 slider 。我在网上找到的建议之一是在我的 CSS 文件中为每种颜色创建多个类，并在定义 slider 时调用所需的类。
不清楚如何在 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>
输出应该如下所示:
最佳答案
您可以单独使用 CSS 将其设置为 div:
在您的 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;
}
已更新 fiddle .
运行代码:
.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>关于javascript - 改变 slider 颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41429571/