大家好！我们现在在我们的小博客系列的第7集调整现有的Lumira可视化扩展，以满足您的需要。这一集将为我在以前的博客中描述的扩展的其他调整技巧添加最后的润色。换言之，我们已经进入了我们这个小博客系列的赛季决赛。但还没结束！请随时提交新的意见和建议，在评论部分，为未来的博客上你想修改自己，对现有的卢米拉可视化。一旦我们得到一些想法或建议，大数据网，我们将开始我们系列的第二季。多刺激啊！

让我们继续我们的赛季决赛：为你的扩展添加图片！对于这个例子，我们将使用我们在第5集和第6集中使用的相同气泡图。

作为参考，您还可以参考现有的带有自定义图像的扩展：带有工具提示和图像的国家签证图

实现我们的目标的过程，即将图像附加到图表中的数据点，非常简单。它实际上是JavaScript代码的一个语句。说真的！

第一步：追加图片

我们首先选择气泡元素（数据点）并追加图片元素。

气泡.append（"image"）

我们还没有结束语句，所以没有分号。我们还需要给它分配其他各种属性。但别忘了结尾的分号！

第二步：通过图片URL请求图片

现在让我们添加第一个也是最重要的需要/获取图片的属性。在此之前，我们要确保我们的图像在项目文件中。让我们先在主项目目录中创建一个"Images"文件夹。此文件夹必须与项目位于同一空间中捆绑包.js文件

现在我们在这个空间里有了这个文件夹，我们开始一个接一个地导入图像，在导入所有图像后，右键单击图像文件夹–>导入–>从文件系统

，我们可以在第一步编写的代码之后继续添加代码片段。

.attr（"xlink:href，函数（d）{

var imgUrl=需要.toUrl（"Images/"+d[dim]+".png"）；

return imgUrl；

}）

在需要.toUrl参考，我们有"Images/"这是图像文件夹的目录路径。我们之所以这样称呼它，是因为我们之前创建的文件夹名为Images。如果文件夹名是secrets，我们将使用"secrets/"。

d[dim]是我们要从数据集获取的维度或数据点的名称。这就是你的数据链接到图像的方式。

".png"是我们正在使用的图像文件扩展名。

这里我们要做的基本上是，获取每个图像的URL，因此我们使用此函数获取每个图像/数据点的URL，使每个图像对应于数据集中的相关数据点。这个requireurl的想法是获取类似于

图像文件夹路径/数据点的内容-名称.png我们将其分解为"Images/"+d[dim]+".png"

*****请注意：处理图像时要记住的要点：

在这种情况下，我们可以得到

var imgUrl=需要.toUrl（"sap_viz_ext_bubblechart-src/resources/Images/"+d[dim]+".png"）；

第3步：定位和大小

既然我们已经将图像加载到项目中，我们只需确定将它们放在图表上的位置。既然我们有一个气泡图，假设我们希望图像在气泡中。为了更好的可读性，我们有四舍五入的图像。我们需要确定每个图像的X和Y位置，以及宽度和高度。即使我们的图像是圆形的，我们也不可能用半径来定义图像！在我们的代码中添加以下属性：

.attr（"x"，function（d）{

return x（d[measure1]）；

}）

.attr（"y"，function（d）{

return y（d[measure2]）；

}）

.attr（"width"，function（d）{

return d[measure3]/2；

}）

.attr（"height"，购物返现，function（d）{

return d[measure3]/2；

}）；

我们将图像的宽度和高度定义为气泡宽度和高度的一半，这样我们既可以看到图像，也可以看到气泡。d[measure3]代表气泡的直径，这就是为什么我们把它除以2，得到图像的宽度和高度的一半。然而，微淘客，我们的定位看起来还不太正确。它们似乎都偏离了图像宽度的一半。

现在如果图像的宽度是d[measure3]/2，那么其中的一半就是d[measure3]/4。这是我们需要分别从X和Y位置减去的。减法，因为我们需要从各自的轴上减去X和Y的距离。我们有我们修改过的代码片段：

.attr（"x"，函数（d）{

返回x（d[measure1]）–（d[measure3]/4）；

}）

.attr（"y"，函数（d）{

返回y（d[measure2]）–（d[measure3]/4）；

}）

最后，我们有：

知道这对于任何类型的图表都是绝对可能的！去试试吧！

带着这个，我们来到了我们的小博客系列的季末：调整现有的Lumira Viz扩展，以满足您的需求！

如前所述，请随时评论和建议新的博客想法，立返利，以调整Lumira扩展和更改/添加不同的属性。

再次感谢大家成为本系列迷你博客的一部分！

期待第二季！！

，大数据数据