d3.js水條形圖

Question

我試圖解決這一問題水汪汪的條形圖以便它能夠處理動態數據集 - http://jsfiddle.net/NYEaX/1855/

有一個問題與唱片公司的定位和調整線的寬度/高度。

var lineHeights = 100; 

    //__ labels 
    var labels = labelsholder.selectAll("text") 
     .data(data); 

    labels.enter() 
     .append("text") 
     .attr("class", "barlabels") 
     .attr("x", 200) 
     .attr("y", function(d, i) { 
     return lineHeights - (20 * i); 
     }) 
     .text(function(d) { 
     return d.label; 
     }) 

    var lines = lineholder.selectAll("line") 
     .data(data); 

//horizontal 


    lines.enter() 
     .append("line") // attach a line 
     .style("stroke-dasharray", ("3, 3")) 
     .style("stroke", "black") // colour the line 
     .attr("x1", function(d, i) { 
     return barWidth - 100/(i+1); 
     }) //x pos of the 1st end of the line 
     .attr("y1", function(d, i) { 
     return lineHeights - (20 * i); 
     }) //y pos of the 1st end of the line 
     .attr("x2", function(d, i) { 
     return barWidth; 
     }) //x pos of the 2nd end of the line 
     .attr("y2", function(d, i) { 
     return lineHeights - (20 * i); 
     }); //y pos of the 2nd end of the line 



//verticals 

    lines.enter() 
     .append("line") // attach a line 
     .style("stroke-dasharray", ("3, 3")) 
     .style("stroke", "black") // colour the line 
     .attr("x1", function(d, i) { 
     return 30 * i; 
     }) //x pos of the 1st end of the line 
     .attr("y1", function(d, i) { 
     return lineHeights - (20 * i); 
     }) //y pos of the 1st end of the line 
     .attr("x2", function(d, i) { 
     return 30 * i; 
     }) //x pos of the 2nd end of the line 
     .attr("y2", function(d, i) { 
     return -15; 
     }); //y pos of the 2nd end of the line 

Answer 1

這裏是工作的jsfiddle：http://jsfiddle.net/NYEaX/1860/

你在哪裏附加水平線條，您使用barWidth - 100/(i+1);確定x軸。這會工作，如果barWidth實際上每個欄的寬度，（但它已經被設置爲150，而不是？）

 .attr("x1", function(d, i) { 
     return (i * 30); 

每個酒吧的20寬度和5每一側的邊緣。因此，要計算偏移量，請將條形編號i與條形的總寬度30相乘。