與D3.js中的酒吧交互

Question

我做了一個小小的h-bar示例。 我想要的是能夠用鼠標調整任何欄的大小。 我通過關注 來選擇一個我想在開始調整大小時開始調整大小，甚至通過鼠標移動事件來結束大小調整。 事實上，它的工作原理，但只適用於第一個酒吧，我沒有看到酒吧調整大小，而我只是當我使鼠標，但只有當我amouse-up。 我在jsfiddle.net/Yves_49/jjj40cop/

有一個小提琴這是我的代碼

function draw_2() { 

var valueMax = 5; 
var tab_val = new Array(); 
for (currentLine = 0; currentLine < 10; currentLine++) { 
    var tab_temp = new Array(); 
    tab_temp['name'] = "name_" + currentLine; 
    tab_temp['value'] = Math.round(Math.random() * valueMax * 10)/10; 
    tab_val[currentLine] = tab_temp; 
    tab_temp.length = 0; 
} 

d3.select("body").selectAll("div.h-bar") 
    .data(tab_val) 
    .enter() 
    .append("div") 
    .attr("class", "h-bar") 
    .append("span"); 

d3.select("body").selectAll("div.h-bar") 
    .data(tab_val) 
    .attr("class", "h-bar") 
    .style("width", function(d) { 
     return (d.value * 100) + "px"; 
    }) 
    .style("background-color", function(d) { 
     return "rgb(" + (200 - Math.round(200 * d.value/valueMax)) + "," + (200 - Math.round(200 * d.value/valueMax)) + ",256)"; 
    }) 
    .select("span") 
    .text(function(d) { 
     return d.value; 
    }); 

d3.select("body").select(".h-bar") 
    .on("mouseover", function() { 
     d3.select(this) 
      .style("background-color", function() { 
       return "rgb(256,0,0)"; 
      }) 
    }) 
    .on("mouseout", function(d) { 
     d3.select(this) 
      .style("background-color", function(d) { 
       return "rgb(" + (200 - Math.round(200 * d.value/valueMax)) + "," + (200 - Math.round(200 * d.value/valueMax)) + ",256)"; 
      }) 
    }); 

d3.select("body") 
    .on("mouseup", function() { 
     d3.select(this) 
      .select(".h-bar") 
      .style("width", function() { 
       return (d3.mouse(this)[0]) + "px"; 
      }) 
      .style("background-color", function() { 
       return "rgb(0,256,0)"; 
      }) 
      .select("span") 
      .text(function(d) { 
       return (Math.round(d3.mouse(this)[0]/10)/10); 
      }); 
    }); 

伊夫

Answer 1

這裏的解決方案：http://jsfiddle.net/wtmsmwxk/1/

有幾點我已經改正：

• .select(".h-bar")只選擇第一項，所以它解釋了爲什麼只有你的第一個酒吧可以移動。您需要改用selectAll。
• 您需要在每個欄上註冊mousedown事件，並在整個容器中註冊mouseup和mousemove事件，因爲您應該假定鼠標可以移出欄。
• 您需要記住哪個欄正在被拖動：在mousedown時間保留對該選擇的引用。這是dragging變量的工作（如果沒有發生拖動，我將其設置爲undefined）。
• 不斷更新條的寬度，寬度更新函數應該在mousemove中，而不是mouseup。

主要新線：

var dragging = undefined; 
d3.select("body").selectAll(".h-bar") 
.on("mousedown", function() {dragging = d3.select(this)}); 

d3.select("body") 
.on("mouseup", function() {dragging=undefined}) 
.on("mousemove", function() { 
    if (!dragging) return; 
    dragging 
    .style("width", function() { ...}) 
}