面粉数据弹出

启用由面粉装订的有样式和数据绑定的弹出

安装

npm install @flourish/data-popup

使用量

这个 settings.yml 文件应当导入到模板中 template.yml 文件,像这样 :

  - Popups
  - property: mypopup
    import: "@flourish/data-popup"

Popup(container, state) 创建弹出式附件 container。 。 。 .

只通过州为弹出. 例如: Popup("#wrapper", state.mypopup)

通过调用添加列名到弹出 popup.addColumnNames(data.data.column_names)。 。 。 .

popup.point(x, y) 将弹出点指向给定坐标.

popup.point(element) 将弹出指向给定元素的中心.

popup.html(html).draw() 显示带有 html 的弹出。 如果你没有在其中指定一个参数 .html() 它会返回弹出 html.

popup.draw(datapoint) 根据设置通过一个用于渲染的数据点(例如来自D3)。 您也可以将一个装饰器功能传递给此调用, 这将获取弹出时的根 DOM 元素, 您可以用来应用额外的样式 .

例如:

data_popup.point(this).draw(d, function(el) {
  el.querySelector("h1").style.color = "red";
});

指定默认模板

也可以为弹出内容指定不同的模板. 例如,如果您想要添加一个 标签或内容需要以特定的顺序显示.

在初始化数据弹出时可以在默认模板中通过. 在卷括号之间添加数据绑定名称, 如 {{name_of_data_binding}}· ;

例如:

var popup_template = "<img src='{{image}}' /><br /><p>{{name}}</p>";
Popup(container, state, popup_template);

指定弹出标题

弹出后可以增加标题. 默认情况下,它会寻找一个名为“ id 并把它变成一个 <h1> 标签。 在初始化"数据弹出"时,可以在第4个参数中覆盖这个. 例如,当您想要将一个名为“ name” 的绑定数据转换为弹出标题时:

Popup(container, state, null, "name");