[英]d3js attach object to svg
我正在創建一個很長的div,其中包含通過以下方法創建的數百條svg行:
function visualizeit(ORFdata,max) {
var browser = d3.select("#viewer")
.append("svg")
.attr("width", max/10)
.attr("height",'50%');
//Add svg to the svg container
for (orf in ORFdata) {
var line = browser.append("svg:line");
var object = ORFdata[orf]
line.datum(object)
line.attr("id", 'mygroup'+orf)
line.attr("x1", function(d){ return ORFdata[orf]["start"]/10})
line.attr("x2", function(d){ return ORFdata[orf]["stop"]/10})
line.attr("y1", function(d){ if (ORFdata[orf]["strand"] == "+1") {return 50} else {return 10}})
line.attr("y2", function(d){ if (ORFdata[orf]["strand"] == "+1") {return 50} else {return 10}})
line.style("stroke", "rgb(6,120,155)")
line.style("stroke-width", orf)
line.on('mouseover', function(d){console.log(d3.select("#mygroup"+orf).datum())})
}
}
但是,當我在任何行上進行鼠標懸停時,我只會從最后一個元素取回數據。 起初我以為這是由於“ mygroup”造成的,所以我在它的+ orf上添加了一個計數器,但是它仍然以某種方式擦除了我以前存儲的數據。
當我查看創建的html代碼時,svg至少通過ID似乎正確。
<line id="mygroup50" x1="103356.7" x2="103231.1" y1="10" y2="10" style="stroke: #06789b; stroke-width: 50px;"></line>
但是在某處鏈接完全出錯了...
我到目前為止如何解決...
var svgContainer = d3.select("body").append("svg")
.attr("width", max/10)
.attr("height", '50%');
//Add svg to the svg container
var lines = svgContainer.selectAll("line")
.data(ORFdata)
.enter()
.append("line")
.attr("x1", function(d){ return d.start/10})
.attr("y1", function(d){ if (d.strand == "+1") {return 65} else {return 10}})
.attr("x2", function(d){ return d.stop/10})
.attr("y2", function(d){ if (d.strand == "+1") {return 65} else {return 10}})
.attr("stroke-width","25")
.attr("stroke",function(d) {if (d.strand == "+1") {return 'green'} else {return 'red'}})
.on('mouseover', function(d) {console.log(d.start)})
}
您正在循環中創建一堆閉包。 您創建的每個函數在其關閉范圍內都具有變量orf
,但是您的循環正在更改orf
的值。 在鼠標懸停事件觸發時函數運行時, orf
具有最終值,因此您的#mygroup + orf
選擇將始終拾取最后一個元素。
這是一個關於閉包的好頁面,其中有一節詳細介紹了循環中閉包的陷阱: http : //conceptf1.blogspot.ca/2013/11/javascript-closures.html 。
在D3中,可以通過使用數據聯接而不是外部循環來解決此問題。 這是一個很好的教程,應該有助於理解它的工作原理: http : //bost.ocks.org/mike/join/
您需要為每個線對象創建不同的事件處理程序,我的意思是將這些線存儲在關聯數組或其他對象中。 這樣,您可能每次都覆蓋。
如果您可以提供jsfiddle或其他工具,我很樂意為您測試該理論。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.