gpt4 book ai didi

javascript - 如何使用 D3.js 将图像添加到 svg 容器

转载 作者:IT王子 更新时间:2023-10-29 03:07:20 56 4
gpt4 key购买 nike

我创建了一个示例 Asp.Net MVC 4 应用程序,我在其中使用 D3.js 附加了一个 SVG 元素,然后在 SVG 中附加了一个文本元素(参见下面的代码)。在我尝试使用本地 png 文件将 img 附加到 SVG 之前,这一切都很好。 img 被附加到 DOM,但 img 没有呈现在页面上。知道我在这里做错了什么,以及如何解决它吗?

@{
ViewBag.Title = "Home Page";
}

<script src="~/Scripts/d3.v3.js"></script>
<script type="text/javascript">
var svg = d3.select("body")
.append("svg")
.attr("width", 200)
.attr("height", 100)
.style("border", "1px solid black");

var text = svg.selectAll("text")
.data([0])
.enter()
.append("text")
.text("Testing")
.attr("x", "40")
.attr("y", "60");

var imgs = svg.selectAll("img").data([0]);
imgs.enter()
.append("img")
.attr("xlink:href", "@Url.Content("~/Content/images/icons/refresh.png")")
.attr("x", "60")
.attr("y", "60")
.attr("width", "20")
.attr("height", "20");

</script>

@Richard Marr - 下面是尝试在纯 HTML 中做同样的事情,这给了我同样的结果。我不确定我的代码是否以这种方式从本地驱动器获取 refresh.png 文件。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v2.js"></script>

</head>
<body>
<script type="text/javascript">
var svg = d3.select("body")
.append("svg")
.attr("width", 200)
.attr("height", 100)
.style("border", "1px solid black");

var text = svg.selectAll("text")
.data([0])
.enter()
.append("text")
.text("Testing")
.attr("x", "40")
.attr("y", "60");

var imgs = svg.selectAll("img").data([0]);
imgs.enter()
.append("svg:img")
.attr("xlink:href", "file:///D:/d3js_projects/refresh.png")
.attr("x", "60")
.attr("y", "60")
.attr("width", "20")
.attr("height", "20");

</script>
</body>
</html>

最佳答案

nodeEnter.append("svg:image")
.attr('x', -9)
.attr('y', -12)
.attr('width', 20)
.attr('height', 24)
.attr("xlink:href", "resources/images/check.png")

关于javascript - 如何使用 D3.js 将图像添加到 svg 容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14567809/

56 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com