在D3中绘制外部加载的svg图形 [英] drawing on an externally loaded svg graphic in D3
本文介绍了在D3中绘制外部加载的svg图形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经从svg文件加载了外部图形，我想实验绘图上，但不能弄清楚如何。我的简单d3代码在这里：
<！DOCTYPE html>
< html>
< head>
< script type =text / javascriptsrc =http://mbostock.github.com/d3/d3.js>< / script>
< / head>
< body>
< script type =text / javascript>
d3.xml（brussels.svg，image / svg + xml，function（xml）{
document.body.appendChild（xml.documentElement）;
}）;
svg.append（circle）
.style（stroke，gray）
.style（fill，white）
.attr（r，40）
.attr（cx，50）
.attr（cy，50）
.on d3.select（this）.style（fill，aliceblue）;}）
.on（mouseout，function（）{d3.select（this）.style（fill，white ）;}）;
< / script>
< / body>
< / html>
我相信这很简单，但我不知道如何创建实际的圆。 p>
谢谢！
解决方案
功能：
d3.xml（brussels.svg，image / svg + xml，function（xml）{
document.body.appendChild（xml.documentElement）;
}）;
异步执行 。因此，在执行回调之前执行跟随它的代码。第二个问题是，你需要定义 svg 变量，然后才能对其进行操作。
以下应该工作：
d3.xml（brussels.svg，image / svg + xml，function（xml）{
document.body.appendChild（xml.documentElement）;
var svg = d3.select（'svg'）;
svg.append（circle）
.style（stroke，gray）
.style（fill，white）
.attr（r 40）
.attr（cx，50）
.attr（cy，50）
.on（mouseover，function（）{d3.select（this）。 style（fill，aliceblue）;}）
.on（mouseout，function（）{d3.select（this）.style（fill，white）;}）;
}）;
I have loaded an external graphic from an svg file and I want to experiment drawing on it but cannot figure out how. my simple d3 code is here:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
<script type="text/javascript">
d3.xml("brussels.svg", "image/svg+xml", function(xml) {
document.body.appendChild(xml.documentElement);
});
svg.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", 50)
.attr("cy", 50)
.on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
.on("mouseout", function(){d3.select(this).style("fill", "white");});
</script>
</body>
</html>
I am sure it is something simple but I am not sure how to create the actual circle.
Thanks!
解决方案
The function:
d3.xml("brussels.svg", "image/svg+xml", function(xml) {
document.body.appendChild(xml.documentElement);
});
executes asynchronously. Hence, the code following it is executed before the callback is executed. The second problem is that you need to define the svg variable before you can operate on it.
Something like the following should work:
d3.xml("brussels.svg", "image/svg+xml", function(xml) {
document.body.appendChild(xml.documentElement);
var svg = d3.select('svg');
svg.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", 50)
.attr("cy", 50)
.on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
.on("mouseout", function(){d3.select(this).style("fill", "white");});
});
这篇关于在D3中绘制外部加载的svg图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
