如何用數據在兩個軸之間畫一條線？ （d3.js）

Question

我想用自己的代碼創建一個平行座標，這樣我就可以很好地學習d3.js。現在我陷入了困境。我有兩個軸有一些數據在它

我想用一條線連接數據。我試圖獲得軸上的兩個數據的位置，但它不適合我，它變得複雜了

有沒有什麼辦法來連接這樣的軸？

下面評論jsfiddle鏈接。請找到它

感謝您的幫助

Answer 1

追加的刻度之間的svg:line是去，但最困難的部分是找到整個SVG文檔中的正確定位的方式。由於事物正在轉換兩次（一次爲軸g，一次爲刻度g），您有兩個選項，通過在元素上使用d3.tranform來總結所有位置，或者在節點上使用類似getBoundingClientRect的東西。

在下面的代碼中，我選擇了後面的代碼。這個快速函數將取任意兩個刻度的text值並繪製一條線。請注意，這些文本值必須是唯一的：

function addLine(t1, t2){ 
    var ticks = {}; 
    d3.selectAll('.tick text').each(function(d) { 
     ticks[d3.select(this).text()] = this; 
    }); 
    var pos1 = ticks[t1].getBoundingClientRect(); 
    var pos2 = ticks[t2].getBoundingClientRect(); 

    svg.append('line') 
     .attr('x1', pos1.left) 
     .attr('y1', pos1.top + 5) 
     .attr('x2', pos2.left - 5) 
     .attr('y2', pos2.top + 5) 
     .style('stroke','black'); 
} 

addLine('a', 'ab'); 
addLine('a', 'bb'); 

全部工作示例：

var w = 200; 
 
var h = 400; 
 
var padding = 100; 
 
var x = ["a","b"]; 
 
var z = ["aa","ab","ba","bb"]; 
 

 
var svg = d3.select("body") 
 
\t \t \t \t \t \t .append("svg") 
 
\t \t \t \t \t \t .attr("width", w) 
 
\t \t \t \t \t \t .attr("height", h); 
 

 
for(var i=1;i<3;i++){ 
 
    
 
\t var yScale = d3.scale.linear() 
 
\t \t \t \t \t \t .domain([0, i === 1 ? x.length : z.length]) 
 
\t \t \t \t \t \t .range([h - padding, padding]); 
 

 
\t \t \t //Define Y axis 
 
\t \t \t var yAxis = d3.svg.axis() 
 
\t \t \t \t \t \t .scale(yScale) 
 
\t \t \t \t \t \t .ticks(i === 1 ? x.length : z.length) 
 
\t \t \t \t \t \t .orient("left") 
 
\t \t \t \t \t \t .tickSize(1) 
 
\t \t \t \t \t \t .tickFormat(function(d){ 
 
           return i === 1 ? x[d] : z[d]; 
 
          }) 
 
\t \t \t \t \t \t 
 
// \t \t \t \t \t \t .style("text-anchor", "middle"); 
 

 
\t \t \t //Create SVG element 
 
\t \t \t svg.append("g") 
 
\t \t \t \t .attr("class", "axis" + i) 
 
\t \t \t \t .attr("transform", "translate("+(i*padding)+",0)") 
 
\t \t \t \t .call(yAxis) 
 
\t \t \t \t .attr("fill","red"); 
 
} 
 

 
function addLine(t1, t2){ 
 
    var ticks = {}; 
 
    d3.selectAll('.tick text').each(function(d) { 
 
     ticks[d3.select(this).text()] = this; 
 
    }); 
 
    var pos1 = ticks[t1].getBoundingClientRect(); 
 
    var pos2 = ticks[t2].getBoundingClientRect(); 
 
    
 
    svg.append('line') 
 
    \t .attr('x1', pos1.left) 
 
     .attr('y1', pos1.top + 5) 
 
     .attr('x2', pos2.left - 5) 
 
     .attr('y2', pos2.top + 5) 
 
    \t .style('stroke','black'); 
 
} 
 

 
addLine('a', 'ab'); 
 
addLine('a', 'bb');

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>