vue 父子组件交互_使用D3构建的声明性和交互式Vue图组件-CSDN博客

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中使用而开发的。

View demo 查看演示 Documentation 文档

安装 (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]个轴应该是可刷的
- but also should have the option to disable brushing
  但也应该选择禁用刷牙
- brushing along an axis should trigger a zoom event
  沿轴刷牙应触发缩放事件
- context 上下文
- snap 齐
[x] plots and axes should accept width and height 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 and x和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将堆栈提供给绘图