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/あなたが水平線を付加した

、あなたはx軸を決定するためにbarWidth - 100/(i+1);を使用していました。 barWidthが、実際には各バーの幅だった場合、これは働いているだろう（しかし、それは代わりに150に設定されていた？）

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

を各バーは20の幅とそれぞれの側に5のマージンを持っています。オフセットを計算するには、バー番号iをバーの全幅に掛けて30とします。