displacy
1.0.0
配x 从v2.0.0开始，现在将显示屏可视化器集成到核心库中。有关如何从Spacy中可视化Doc对象的更多详细信息，请参见此处。我们还为服务和测试Spacy模型提供新的工具套件。独立可视化器的代码仍将在GitHub上可用，只是无法积极维护。
spaine.js是一个现代且与服务无关的可视化库。我们希望这使比较不同的服务并探索自己的内部模型变得容易。如果您正在使用Spacy的句法解析器，则显示屏应该是常规工作流程的一部分。由于Spacy的解析器是统计的，因此通常很难预测其将如何分析给定的句子。使用显示屏，您可以尝试查看。您还可以与团队共享讨论页面，或保存SVG以便在其他地方使用。如果您正在开发自己的模型，则可以自己运行服务 - 它是100％开源。
要了解有关显示的更多信息，请查看博客文章。
该演示是用Jade（又名Pug）实施的，这是一种可扩展的模板语言，可编译为HTML，并由HARP构建或提供。要在http：// localhost：9000上本地服务，只需运行：
sudo npm install --global harp
git clone https://github.com/explosion/displacy
cd displacy
harp server或简单地从NPM安装它：
npm install displacy-demo该演示是用ecmascript 6编写的。对于完整的跨浏览器兼容性，请确保使用像babel这样的编译器。有关更多信息，请参见此兼容性表。
要在项目中使用显示，请从github或通过NPM下载displacy.js ：
npm install displacy然后包括文件并初始化一个新实例，以指定API和设置：
const displacy = new displaCy ( 'http://localhost:8000' , {
container : '#displacy' ,
format : 'spacy' ,
distance : 300 ,
offsetX : 100
} ) ;我们产生输入数据的服务也是开源的。您可以在Spacy-Services上找到它。
以下设置可用：
| 环境 | 描述 | 默认 |
|---|---|---|
| 容器 | 要绘制显示的元素可以是任何查询选择器 | #displacy |
| 格式 | 用于生成解析的格式（ 'spacy'或'google' ） | 'spacy' |
| DefaultText | 如果显示显示未指定文本的文本，则使用的文本 | 'Hello World.' |
| DefaultModel | 如果在未指定模型的情况下运行显示屏，则使用的模型 | 'en' |
| 崩溃 | 塌陷标点符号 | true |
| 塌陷晶格 | 崩溃的短语 | true |
| 距离 | px中的单词之间的距离 | 300 |
| OffSetX | 在PX的SVG的左侧间距 | 50 |
| 箭头区 | PX中的箭头之间的间距以避免重叠 | 20 |
| 箭头 | 箭头的宽度 | 10 |
| 箭头 | PX中的弧宽度 | 2 |
| 词语 | px中的单词和弧之间的间距 | 50 |
| 字体 | 所有文本的字体面孔 | 'inherit' |
| 颜色 | 文本颜色，十六进制，RGB或颜色名称 | '#000000' |
| BG | 背景颜色，十六进制，RGB或颜色名称 | '#ffffff' |
| onstart | 在服务器请求开始时要执行的功能 | false |
| 努力 | 回调函数将在成功的服务器响应上执行 | false |
| Onerror | 如果请求失败，将执行的功能 | false |
parse()方法使Spacy生成的解析作为容器中的SVG。
displacy . parse ( 'This is a sentence.' , 'en' , {
collapsePunct : false ,
collapsePhrase : false ,
color : '#ffffff' ,
bg : '#000000'
} ) ;此处指定的视觉设置覆盖了全局设置。可用的设置是崩溃的，倒塌的词，字体，颜色和bg 。
另外，您可以使用render()手动渲染一组json形式的弧和单词：
const parse = {
arcs : [
{ dir : 'right' , end : 1 , label : 'npadvmod' , start : 0 }
] ,
words : [
{ tag : 'UH' , text : 'Hello' } ,
{ tag : 'NNP' , text : 'World.' }
]
} ;
displacy . render ( parse , {
color : '#ff0000'
} ) ;此处指定的视觉设置覆盖了全局设置。可用的设置是字体，颜色和BG 。
默认情况下，显示屏希望Spacy的JSON输出以以下样式：
{
"arcs" : [
{ "dir" : " left " , "end" : 4 , "label" : " nsubj " , "start" : 0 }
],
"words" : [
{ "tag" : " NNS " , "text" : " Robots " }
]
}如果将format设置为'google' ，则API响应将从Google的格式转换。要添加您自己的转换规则，请添加一个新案例handleConversion() ：
handleConversion ( parse ) {
switch ( this . format ) {
case 'spacy' : return parse ; break ;
case 'google' : return ( { words : ... , arcs : ... } ) ; break ;
case 'your_format' : return ( { words : ... , arcs : ... } ) ; break ;
default : return parse ;
}
}现在，您可以使用format: 'your_format' 。
您可以在/assets/css/_displacy-theme.sass中找到当前的主题设置。 SVG输出中包含的所有元素都带有标签和数据属性，并且可以使用CSS灵活地设计。默认情况下，该元素的currentColor彩色用于着色，这意味着只需要更改CSS中的color属性即可。
以下课程可用：
| 班级名称 | 描述 |
|---|---|
| .Displacy-word | 单词文字 |
| .Displacy-Tag | POS标签 |
| .displacy-token | 单词和pos标签的容器 |
| .Displacy-arc | 箭头弧（无标签或箭头） |
| .Displacy-Label | 关系类型（箭头标签） |
| .Displacy-Arrowhead | 箭头 |
| .Displacy-Arrow | 弧，标签和箭头容器 |
此外，您可以将这些属性用作属性选择器：
| 属性 | 价值 | 在元素上 |
|---|---|---|
| 数据标签 | POS标签值 | .displacy-token .displacy-word .displacy-tag |
| 数据标签 | 关系类型值 | .displacy-arrow .displacy-arc .displacy-arrowhead .displacy-label |
| 数据二线 | 箭头的方向 | .displacy-arrow .displacy-arc .displacy-arrowhead .displacy-label |
使用这些选择器和一些基本CSS逻辑的组合，您可以根据元素在解析中的角色和功能来创建功能强大的模板。这里有几个例子：
/* Format all words in 12px Helvetica and grey */
. displacy-word {
font : 12 px Helvetica , Arial , sans-serif;
color : grey;
}
/* Make all noun phrases (tags that start with "NN") green */
. displacy-tag [ data-tag ^= "NN" ] {
color : green;
}
/* Make all right arrows red and hide their labels */
. displacy-arc [ data-dir = "right" ] ,
. displacy-arrowhead [ data-dir = "right" ] {
color : red;
}
. displacy-label [ data-dir = "right" ] {
display : none;
}
/* Hide all tags for verbs (tags that start with "VB") that are NOT the base form ("VB") */
. displacy-tag [ data-tag ^= "VB" ] : not ([ data-tag = "VB" ]) {
display : none;
}
/* Only display tags if word is hovered (with smooth transition) */
. displacy-tag {
opacity : 0 ;
transition : opacity 0.25 s ease;
}
. displacy-word : hover + . displacy-tag {
opacity : 1 ;
}显示屏使您可以通过words和arcs的解析的JSON表示来定义自定义属性：
"words" : [
{
"tag" : " NNS " ,
"text" : " Robots " ,
"data" : [
[ " custom " , " your value here " ],
[ " example " , " example text here " ]
]
}
]自定义属性是作为带有data-前缀的数据属性添加的，因此它们的名称不应包含空格或特殊字符。如果添加到words中，则将数据属性附加到令牌（ .displacy-token ）（如果添加到arcs上，则将其附加到箭头（ .displacy-arrow ）：
< text class =" displacy-token " data-custom =" your value here " data-example =" example text here " > ... </ text >
