我已经创建了一个示例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", …有谁知道有什么区别？
我的理解是两者都会返回相同的选择.
但是,当我进行追加时,如果我使用selectAll("p")则不起作用.
例如,这有效:
var foo = d3.select("body").selectAll("p")
.data([1,2,3,4])
foo.enter.append("p")
虽然这不起作用:
var foo = d3.selectAll("p")
.data([1,2,3,4])
foo.enter.append("p")
为什么后者不起作用？
从这个示例http://bl.ocks.org/1062288开始,我希望有一个树,所有节点都已折叠,因此初始图应该只包含一个节点(根).
我正在尝试在 matplotlib 子图中嵌入一个 SVG 图像。
matplotlib 只能在本机读取 PNG，但是如果安装了 PIL，它将使用它来加载图像并返回一个可以与 imshow() 一起使用的数组（如果可能）。 http://matplotlib.sourceforge.net/api/pyplot_api.html
import Image
filename = "/tmp/figure.svg"
pil_img = Image.open(filename) # PIL image
img = np.asarray(pil_img) # converting PIL image into numpy array
self.axes.cla()
self.axes.imshow(img)
但当然 PIL 不支持 SVG。错误：
文件“/usr/lib/python2.7/dist-packages/PIL/Image.py”，第 1980 行，打开
引发 IOError("无法识别图像文件")
IOError：无法识别图像文件
如何光栅化 SVG 文件以imshow使用 matplotlib绘制或直接绘制向量？
谢谢。
我正在使用带有Backbone.js模型的d3.当模型属性发生更改时,将触发一个事件,并使用hasChanged()标志标记模型,并返回changedAttributes()哈希.我理解如何使用d3的enter()和exit()来处理已创建或删除的模型.我弄清楚的是如何根据模型属性的变化修改各自的DOM元素.我可以使用Backbone助手来找出要修改的内容,但是d3的下一步是什么？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
<style type="text/css">
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.stations, .stations svg {
position: absolute;
}
.stations link {
position: absolute;
stroke: black;
stroke-width: 2px;
}
.stations svg {
width: 60px;
height: 20px;
padding-right: 100px;
font: 10px sans-serif;
}
.stations circle {
fill: brown;
stroke: black;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<div id="map"></div>
<script …d3.js ×5
javascript ×5
svg ×2
backbone.js ×1
dom ×1
google-maps ×1
matplotlib ×1
python ×1
tree ×1