在D3.js中组合对象定位和标记
在D3.js中组合对象定位和标记
提问于 2013-03-22 17:18:56
我刚接触D3js，并且(可能很愚蠢地)正在探索它作为一个简单导航工具的价值。I have managed to cobble together a basic page that works，但它似乎相当冗长，我想知道有没有人有什么建议，如何才能使它更优雅，并可能集成标签和圆圈绘制功能？
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script type="text/javascript" src="scripts/d3.v3.js"></script>
</head>
<body>
<div id="viz"></div>
<div id="status" style="position:fixed;bottom:0;left:0;
color:white;background-color:grey;font-size:small"></div>
<script type="text/javascript">
// functions for adding a 'status' box with link info
function addStatus(targetURL){document.getElementById('status').innerHTML=targetURL;}
function clearStatus(){document.getElementById('status').innerHTML=null;}
var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 500)
.attr("height", 200);
var dataset = [[100, 100, "http://google.com/", "Google"],
[300, 100, "http://yahoo.com/", "Yahoo"]];
// Add labels
sampleSVG.selectAll("text")
.data(dataset)
.enter().append("text")
.attr("text-anchor", "middle")
.attr("x", function(d){return d[0]})
.attr("y", function(d){return d[1]})
.text(function(d) {return d[3];});
// Add circles and functionality
sampleSVG.selectAll("circle")
.data(dataset)
.enter().append("circle")
.style("fill", "transparent")
.style("stroke", "grey")
.style("stroke-width", 3)
.attr("r", 50)
.attr("cx", function(d){return d[0]})
.attr("cy", function(d){return d[1]})
.on("mouseover",
function(d){ d3.select(this).style("stroke", "black");
addStatus(d[2]); }
)
.on("mouseout",
function(){
d3.select(this).style("stroke", "grey");
clearStatus(); } )
.on("mouseup", function(d){window.location = d[2];});
</script>
<!-- ... -->
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2013-03-22 18:09:28
如果每个圆有一个标签，则可以组合这两个调用来选择圆和文本。也就是说，在同一选择上添加圆和标签。
var sel = sampleSVG.selectAll("text")
.data(dataset)
.enter();
sel.append("text")
...
sel.append("circle")
...你甚至可以在一个调用链中做所有的事情。
sampleSVG.selectAll("text")
.data(dataset)
.enter()
.append("circle")
...
.append("text");但是，这会将text元素附加到circle元素，并且可能不会在所有情况下都产生您想要的结果(特别是对于事件处理程序)。
除此之外，d3没有提供任何开箱即用的功能，可以同时放置形状和标签。有像NVD3这样的库提供了这样的功能。
编写自己的包装器函数可能是最简单的，该函数在给定数据的情况下，以您想要的方式追加形状和标签。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15576299
复制相关文章
相似问题
腾讯云开发者
