面粉滑动组件
滑动器组件提供了可配置的滑动器控制. 我们开发了用于 面粉 模板, 但这是开源的,你可以用来做任何事情.
import Slider from "@flourish/slider";
var slider = Slider("#year-slider")
.domain([2000, 2017])
.startLabel("2000").endLabel("2017")
.snap(true)
.on("change", function(year) {
console.log("Year set to", year);
})
.draw();
它被开发成ES6模块,你可以使用它 滚出.js 财务报告和审定财务报表 卷起插孔-节点-溶解, (中文(简体) ), 或另一种ES6相容的模块捆绑器. 或者可以直接从网络中包含文件 :
<script src="https://cdn.flourish.rocks/slider-v1.full.min.js"></script>
滑动器使用 D3级。如果您在页面上已经使用 D3,那么您可以
包含一个使用 d3 对象,而不是包含
文件中的D3代码.
<script src="https://cdn.flourish.rocks/slider-v1.min.js"></script>
若您没有将D3用于其他目的 -full 捆绑,
因为它是使用卷起来构建的, 仅仅包括它实际使用的D3元素.
交互式实例
在面粉模板中使用滑块
在面粉模板中使用滑动器的典型方法是创建模块级变量 在您使用的每个幻灯片的模板源中,以及其值的状态属性:
var year_slider;
export var state = {
…
year: 2000
};
在那个 draw() 函数
创建滑块, 从状态设置其值, 并绘制 :
slider = Slider("#slider")
.domain([2000, 2017])
.startLabel("2000").endLabel("2017")
.snap(true)
.value(state.year)
.on("change", function(year) {
// If the user drags the slider, update the state and the graphic
state.year = year;
update();
})
.draw();
在那个 update() 函数
从状态更新滑块 :
slider.value(state.year).update();
就这样! 如果您遵循这个模式, 您的滑动器将正确工作 视觉编辑和故事编辑.
全文参考
构造器
Slider(selector) 创建将引入 DOM 元素的滑动器
由 selector。这可以是 HTML 元素或 SVG <g>。 。 。 .
方法
.draw()
画出滑相.
.update()
基于 设置 你变了。 如果滑动器没有出现
已绘制,然后调用 .update() 将画出它.
.value()
获取滑动器的当前位置, 单位: 域名。 。 。 .
.value(value)
设置滑动器的位置。 图形不会更新直到您调用 .update(), (中文(简体) ),
将滑动器移动到您调用的 12 个位置 slider.value(12).update()。 。 。 .
.on(event, handler)
附上事件处理器 。 唯一支持的事件是 change。您可以附加
同一事件的多个处理者,他们都会酌情开火.
活动
change
当用户通过拖动手柄来移动滑动器时,更改事件会起火
点击频道 。 事件处理器通过滑动器的新值
作为论据,及其 this 对象是滑动实例.
设置
通过调用幻灯片对象上的同名方法来应用设置 以新值作为参数。 这些方法返回滑动对象,所以 可以锁上它们。 例如,您可以将维度设置为200×50
slider.width(200).height(50);
您可以通过调用没有的方法获取设置的当前值 参数,例如:.
var handle_radius = slider.handleRadius();
核心设置
domain
表示滑动器可取值范围的由两个数字组成的阵列.
默认为 [0, 1]。 。 。 .
snap
若为 true,按最近的全数。 如果排序的数组,请按
数组中最近的值。 默认为 false,它提供了连续
滑轮.
width
滑动元素的宽度 。 如果没有具体说明,则 滑轮填满整个容器.
如果滑动器元素在滑动器时没有被渲染
绘制, 例如如果它是样式 display: none,然后是
宽度和高度 必须 指定
height
滑动元素的高度 。 只有在下列情况下才应供应:
width 还提供.
样式设置
margin
此对象应具有属性 top, (中文(简体) ), left,以及 right。 。 。 .
如果其中任何属性被省略或无效, 库将尝试
根据其他参数选择一个合理的比值。 (没有)
如果你使用始末标签
默认为 { top: null, left: null, right: null }。 。 。 .
handleRadius
圆滑柄的半径. 未提供时默认为15个.
handleFill
指柄之色相. 默认为 black。手柄也可以在 CSS 中被样式化
使用 .slider-handle 课.
channelHeight
滑道高处. 未提供时默认为15个.
channelRadius
频道角的半径. 默认为无效, 也就是一半 频道H8,使频道圆形结束.
channelFill
道所取之色相. 默认为 #eee。频道也会在 CSS 中样式化
使用 .slider-channel 课.
轴选项
axis
若为 true,在滑动器下方显示一轴。 如果有的话 d3-axis 对象,使用
以定义轴。 默认为 false,表示没有轴.
接下来的几个选项只影响轴 :
scale
ticks
tickFormat
tickSize
这些都对应同名选项 d3-axis。 。 。 .
他们只是真正有用的结合 .axis(true):如果你正在建造自己的
轴对象,可以在将其传递给滑动器之前将这些选项直接设置在轴对象上.
标签选项
label
在滑动上方绘制标签文字。 默认为无效, 这意味着没有标签 .
labelSize
标签字体大小 。 默认为 18. 标签也可以在 CSS 中使用 .slider-label 课.
startLabel
要绘制到滑动器左侧的文字。 默认为无效。 您可能需要调整边距, 才能为这个标签腾出空间 .
startLabelBelow
是否在滑动器下绘制起始标签 。 默认为 false左边画的.
endLabel
要绘制到滑条右侧的文字。 默认为无效。 您可能需要调整边距, 才能为这个标签腾出空间 .
endLabelBelow
是否绘制幻灯片下方的尾标签 。 默认为 false右转.
startEndLabelSize
始末标签的字体大小 。 默认为16. 起始和结尾标签也可以在 CSS 中被命名
使用 .slider-end-labels 课.
属性
version
Slider.version 使用 语义版本。 。 。 .