d3js svg文本選擇編號

我已經實現了我認爲是d3中相對簡單的鼠標移動行爲，但我明顯錯過了一些東西，因爲我似乎無法弄清楚它爲什麼不起作用。d3js svg文本選擇編號

目標是讓文本塊與一組數據點相關聯，並在用戶將鼠標懸停在數據點上時顯示文本塊。當使用點擊數據點時，文本塊保持可見。我沒有使用工具提示，因爲我需要一次顯示多個文本塊。

svgContainer.selectAll("text") 
    .data(data) 
    .enter() 
    .append("text") 
     .attr("x", function(d) { return d.x_axis; }) 
     .attr("y", function(d) { return d.y_axis; }) 
     .attr("id", function(d) {return("textBlock" + d.documentNumber);}) 
     .attr("visibility", "visible") 
     .text(function(d) { return d.description;}); 
     .call(wrap, 200, function(d) { return d.x_axis; }, function(d) { return d.y_axis; });

鼠標懸停：

首先，我使用的是包裝功能部件從博斯托克自己（http://bl.ocks.org/mbostock/7555321）

function wrap(text, width, xLoc, yLoc) { 
    text.each(function() { 
    var text = d3.select(this), 
     words = text.text().split(/\s+/).reverse(), 
     word, 
     line = [], 
     lineNumber = 0, 
     lineHeight = 1.0, // ems 
     y = text.attr("y"), 
     //dy = parseFloat(text.attr("dy")), 
     dy = 0, 
     tspan = text.text(null).append("tspan").attr("x", xLoc).attr("y", y).attr("dy", dy + "em"); 
    while (word = words.pop()) { 
     line.push(word); 
     tspan.text(line.join(" ")); 
     if (tspan.node().getComputedTextLength() > width) { 
     line.pop(); 
     tspan.text(line.join(" ")); 
     line = [word]; 
     tspan = text.append("tspan").attr("x", xLoc).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); 
     } 
    } 
    }); 
}

本身使用該函數創建的模塊創建在SVG的文本塊數據點的功能（繪製成svg圈）看起來像這樣。請注意，只需配置以下內容即可打開＃textBlock5的可見性，而不管哪個圓圈被掩蓋;這是一個調試的步驟只是從select聲明被正確構造的DOM（見下文）

svgContainer.selectAll("circle") 
     .data(data) 
     .on("mouseover", function(d){ 
      return console.log("#textBlock"+d.documentNumber); 
      d3.select("#textBlock5").attr("visibility", "visible"); 
      });

的ID刪除的功能，但是鼠標懸停功能不改變visibility屬性...誰能幫助我確定我在這裏做錯了什麼！？

<text x="927.1563942727792" y="673.2598605856803" id="textBlock5" visibility="visible"> 
<tspan x="927.1563942727792" y="673.2598605856803" dy="0em">text here</tspan> 
//more tspans here... 
</text>

來源

2015-07-01 blonsway

是'__return__ console.log（「＃textBlock」+ d.documentNumber）;'打算？現在鼠標懸停處理程序永遠不會到達可視性更改線。 – birdspider

你的小提琴在哪裏？ – kwoxer

OMG，birdspider。我無法相信，我沒有看到......去證明一個好的休息會給我帶來什麼樣的價值。感謝您抽出寶貴的時間給我們一次又一次的體驗！

來源

2015-07-01 23:37:16 blonsway

d3js svg文本選擇編號

回答

相關問題