vue 父子组件交互
陈述性图 (vue-declarative-plots)
This repository will serve as a place for reusable Vue plot components (built with D3). These components were developed for use in iMuSE.
该存储库将用作可重复使用的Vue绘图组件(由D3构建)的地方。 这些组件是为在iMuSE中使用而开发的。
安装 (Installation)
Coming soon
快来了
发展历程 (Development)
Install dependencies:
安装依赖项:
yarn
Serve for development at http://localhost:8080:
服务于http:// localhost:8080进行开发:
yarn run serve
Build for production (generates /dist
and /examples
):
进行生产构建(生成/dist
和/examples
):
yarn run build
Run tests with jest:
用jest运行测试:
yarn run test
Compile documentation with documentationjs:
使用documentationjs编译文档 :
yarn run docs
绘图组件 (Plot Components)
BarPlot :white_check_mark:
条形图:white_check_mark:
StackedBarPlot :white_check_mark:
StackedBarPlot:white_check_mark:
ScatterPlot :white_check_mark:
ScatterPlot:white_check_mark:
GenomeScatterPlot :white_check_mark:
GenomeScatterPlot:white_check_mark:
GenomeStackedBarPlot
GenomeStackedBarPlot
GenomeTrackPlot
GenomeTrackPlot
TrackPlot :white_check_mark:
TrackPlot:white_check_mark:
MultiTrackPlot
MultiTrackPlot
BoxPlot :white_check_mark:
BoxPlot:white_check_mark:
MultiBoxPlot :white_check_mark:
MultiBoxPlot:white_check_mark:
ViolinPlot
小提琴图
轴组件 (Axis Components)
Axis :white_check_mark:
轴:white_check_mark:
GenomeAxis :white_check_mark:
GenomeAxis:white_check_mark:
DendrogramAxis
树状轴
其他组件 (Other Components)
PlotContainer :white_check_mark:
PlotContainer:white_check_mark:
Legend
传说
SortOptions :white_check_mark:
SortOptions:white_check_mark:
目标: (Goals:)
[x] props should declare visual encodings of data
[x]道具应声明数据的视觉编码
x="sample_id" y="exposure" c="signature" // color
[x] props should declare where to find the data
[x]道具应声明在哪里可以找到数据
- data will never be passed directly to a plot - instead it will be globally accessible by a key 数据永远不会直接传递到绘图-而是可以通过密钥全局访问
<key>: <data>
mappings<key>: <data>
映射存储在全局JSON对象中exposures_data
, the following prop would specify to a plot component that this dataset should be used:exposures_data
数据的数据集,以下属性将向绘图组件指定应使用该数据集:data="exposures_data"
[x] props should declare where to find the scales
[x]道具应声明在哪里可以找到天平
- [x] scales will be ES6 classes with different APIs depending on whether categorical, continuous, etc... [x]量表将是具有不同API的ES6类,具体取决于分类,连续等。
- [x] scales will always expose a domain [x]标度将始终显示一个域
- [x] scales will always expose a domain-var-to-color function [x]比例尺将始终显示domain-var-to-color函数
- [ ] the color scale (or even individual colors) should also be able to be changed programmatically []色阶(甚至是单独的颜色)也应该可以通过编程方式进行更改
- [x] scales will always expose a domain-var-to-human-readable-text function [x]标度将始终公开域变量到人类可读的文本函数
- [x] categorical scales will always expose a sort function that takes in a specification of the data that will define the ordering [x]分类标度始终会显示一个排序函数,该函数接受将定义排序的数据的规范
-
- if categorical, this will accept an array of new values 如果是分类的,则将接受新值的数组
[min, max]
array[min, max]
数组- if binary, this will accept a boolean value 如果为二进制,则将接受布尔值
- scales should contain all of the information necessary to draw a legend 比例尺应包含绘制图例所需的所有信息
- scales will never be passed directly to a plot - instead they will be globally accessible by a key 比例尺永远不会直接传递到绘图-而是可以通过按键全局访问
<variable>: <scale>
mappings<variable>: <scale>
映射存储在全局JSON对象中sample_id
, the following prop would specify to a plot component that this scale object should be used for the x axis:sample_id
,以下属性将指定给绘图组件该比例对象应用于x轴:x="sample_id"
[x] plots should assume which type of scale is on which axis
[x]图应假设哪种类型的比例尺在哪个轴上
- for example, a bar plot (with vertical bars) would assume a continuous y scale and a categorical x 例如,条形图(带有垂直条)将假定连续的y比例和分类的x
[x] events should alert plots when a scale has been mutated
[x]事件应在比例尺发生突变时提醒绘图
- these alerts should specify which scale has been updated using a key 这些警报应指定已使用键更新了哪个比例
- plot components should listen for these updates and re-draw if necessary 绘图组件应侦听这些更新,并在必要时重新绘制
- scales may be mutated upon filter or zoom 缩放可能会因滤镜或缩放而发生变化
[x] data should be immutable
[x]数据应该是不可变的
DataContainer
instanceDataContainer
实例中- however, plots may need to subscribe to data updates for asynchronous loading reasons 但是,出于异步加载的原因,地块可能需要订阅数据更新
[x] plots should NOT draw their own axes
[x]图不应绘制自己的轴
- axes should be independent of plots 轴应独立于绘图
- axes should be contained in their own components 轴应包含在其自己的组件中
[x] axes should accept props specifying which scale to use, and where to draw
[x]轴应接受指定使用哪个比例以及在哪里绘制的道具
variable="sample_id" side="bottom"
[x] axes should be brush-able
[x]个轴应该是可刷的
[x] plots and axes should accept
width
andheight
props[x]绘图和轴应接受
width
和height
道具- container components should be responsible for keeping plot and axis props in sync if they are dynamic 如果容器组件是动态的,则它们应负责使绘图和轴道具保持同步
:pWidth="windowWidth" :pHeight="300"
[x] plots should accept margin props
[x]地块应接受保证金道具
- container components should be responsible for keeping margin props in sync if they are dynamic 如果容器组件是动态的,则容器组件应负责使其保持同步
:pMarginTop="10" :pMarginLeft="50" :pMarginRight="20" :pMarginBottom="0"
[x] plots should emit click events, specifying variables in a predefined order to a prop-supplied callback
[x]绘图应发出点击事件,以预定义的顺序将变量指定给道具提供的回调
- example: 例:
:clickHandler="chooseSample" // will be called with chooseSample(x, y, c)
[x] plots should have tooltips
[x]地块应有工具提示
- tooltips should obtain human-readable variable names from the appropriate scale 工具提示应从适当的比例中获得易于理解的变量名
[x] plots should dispatch applicable hover events
[x]地块应调度适用的悬停事件
- dispatching should be done through the scale 调度应通过规模
-
x
andx
和color
variablescolor
变量的调度
[x] the internals of the drawing of the plots should be abstracted away as much as possible
[x]应尽可能抽象出绘图的内部结构
- details of SVG, canvas, etc. implementation should be contained 应当包含SVG,画布等实现的详细信息
[x] all meaningful interactions will be stored in a history stack
[x]所有有意义的交互都将存储在历史记录堆栈中
- meaningful interactions: scale filter/zoom/sort 有意义的交互:缩放过滤器/缩放/排序
- will allow backward(undo)/forward(redo) operations 将允许后退(撤消)/前进(重做)操作
- will allow "replaying" of the user's interactions 将允许“重放”用户的交互
- will allow sharing of a user session, so that others may replay or step through the interactions 将允许共享用户会话,以便其他人可以重播或逐步进行交互
- but this should also be optional, for example if the user chooses not to supply the stack to a plot via prop 但这也应该是可选的,例如,如果用户选择不通过prop将堆栈提供给绘图
翻译自: https://vuejsexamples.com/declarative-and-interactive-vue-plot-components-built-with-d3/
vue 父子组件交互